Цикл данных из подписки Angular

Question

У меня неумелое решение проблемы. У меня циклические данные из наблюдаемой. Я хотел бы знать правильный способ сделать это, потому что мне это не кажется правильным.

Я динамически создаю форму, используя ответ от вызова API

Это мой компонент

export class NewProductGeneralComponent implements OnInit, OnDestroy {
  productTitles: [];
  subscription: Subscription;
  startform  = false;
  productDescFormGroup: FormGroup;
  group = {};
  constructor(
    private apiservice: ApiService
  ) { }

  getProductColumns() {
    this.apiservice.getProductTable('/api/products-columns')
      .subscribe( res =>  {
        this.productTitles = res;
        for(const k in this.productTitles) {
          this.group[k] = new FormControl('');
        }
      });
  }

  ngOnInit() {
    this.getProductColumns();
    setTimeout(() => {
      this.productDescFormGroup = new FormGroup(this.group);
      this.startform = true;
    }, 300);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  onSubmit() {
    console.log(this.productDescFormGroup.value);
  }

}

Это мой шаблон

<ng-container *ngIf="startform">
  <form [formGroup]="productDescFormGroup" (ngSubmit)="onSubmit()">
    <div *ngFor="let form_elem of productTitles| keyvalue">
      <div [ngSwitch]="form_elem.value">

        <fieldset *ngSwitchCase="'string'">
          <label> {{ form_elem.key.replace('_', ' ') }} </label>
          <input type="text" formControlName="{{form_elem.key}}" />
        </fieldset>

        <fieldset *ngSwitchCase="'decimal'">
          <label> {{ form_elem.key.replace('_', ' ') }} </label>
          <input type="number" formControlName="{{form_elem.key}}" />
        </fieldset>

        <fieldset *ngSwitchCase="'boolean'">
          <label> {{ form_elem.key.replace('_', ' ') }} </label>
          <select formControlName="{{form_elem.key}}" >
            <option value="">Select Value</option>
            <option value="1">Yes</option>
            <option value="0">No</option>
          </select>
        </fieldset>

      </div>
    </div>
    <input type="submit" value="SAVE" class="btn btn-sm btn-danger"
    [disabled]="productDescFormGroup.invalid" />
  </form>
</ng-container>

Моя проблема в том, что если я не введу тайм-аут, группа форм не инициализируется, поэтому при отправке ничего не происходит, кроме Кнопка отправки активна, даже если форма не заполнена. Как я могу это исправить, не используя тайм-аут?

Answer 1

Просто для тех, у кого может быть похожая проблема. Ответ заключается в использовании распознавателей, которые запускаются при инициализации маршрута и получают данные от службы

Ниже приведен код для маршрута

  {
    path: 'products/add-product',
    component: AddProductPageComponent,
    resolve: { productTitles: ProductTitlesResolver }
  },

Средство распознавания

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { ApiService } from '../index';

@Injectable({
  providedIn: 'root'
})
export class ProductTitlesResolver implements Resolve<Observable<string>> {

  constructor( private apiservice: ApiService ) { }

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    return this.apiservice.getProductTable('/api/products-columns');
  }
}

И обновленный компонент

import { ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-new-product-general',
  templateUrl: './new-product-general.component.html',
  styleUrls: ['./new-product-general.component.scss']
})
export class NewProductGeneralComponent implements OnInit, OnDestroy {
  productTitles: [];
  productDescFormGroup: FormGroup;
  group = {};

  constructor(
    private apiservice: ApiService,
    private route: ActivatedRoute
  ) {}

  getProductColumns() {
    this.route.data
      .subscribe( res =>  {
        this.productTitles = res.productTitles;
        for(const k in this.productTitles) {
          this.group[k] = new FormControl('');
        }
      });

  }

  ngOnInit() {
    this.getProductColumns();
    this.productDescFormGroup = new FormGroup(this.group);
  }