0

对于从可观察对象循环数据的问题，我有一个不优雅的解决方案。我想知道正确的方法，因为这对我来说似乎不正确。

我正在使用来自 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>

我的问题是，如果我不设置超时，表单组不会初始化，因此提交时不会出现任何内容，而且即使表单未完成，也会启用提交按钮。如何在不使用超时的情况下解决此问题？

4

1 回答 1

0

仅适用于可能有类似问题的任何人。答案是使用在路由初始化时运行的解析器并从服务中获取数据

下面是路线的代码

  {
    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);
  }
于 2020-01-28T09:35:27.963 回答