如何在动态形式Angular 5中设置select元素的值

Question

我正在使用Angular 5开发应用程序并使用本教程中的动态表单https://toddmotto.com/angular-dynamic-components-forms

初始化select元素的值时遇到问题。我从Firebase实时数据库中检索值并将其初始化为select元素的值，但未在select值中设置。然而，我成功设置了输入元素的值。

如何初始化select元素的值？

表单配置：

// Forms configuration
export let formConfig: FieldConfig[] = [
    {
      type: 'input',
      label: 'Name',
      name: 'name',
      placeholder: 'Name',
      validation: [ Validators.required, Validators.minLength(4) ]
    },
    {
      type: 'select',
      label: 'Category',
      name: 'category',
      placeholder: 'Select category',
      validation: [ Validators.required ]
    },
    {
      label: 'Submit',
      name: 'submit',
      type: 'button',
      disabled: true
    }
];

FormSelectComponent：

@Component({
  selector: 'app-form-select',
  template: `
  <div class="app-dynamic-field app-form-select" [formGroup]="group">
    <mat-form-field>
      <mat-select [placeholder]="config.placeholder" [formControlName]="config.name">
        <mat-option *ngFor="let option of config.value" [value]="option.label">
          {{ option.label }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>`,
  styleUrls: ['./form-select.component.css']
})
export class FormSelectComponent implements Field {
  config: FieldConfig;
  group: FormGroup;

}

添加条目组件

@Component({
  selector: 'app-add-entry',
  template: `<app-dynamic-form
  [config]="formConfig"
  #form="appDynamicForm"
  (change)="detectFiles($event)"
  (submit)="submit($event)">
</app-dynamic-form>`,
  styleUrls: ['./add-entry.component.css']
})


export class AddEntryComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild(DynamicFormComponent) form: DynamicFormComponent;

  private ngUnsubscribe: Subject<any> = new Subject();
  private path: string;
  private fileDir: string;
  private formConfig: any;
  private categoryList = [];

  constructor(
    private addService: AddService,
    private listService: ListService ) {
      console.log('constructor');

    }

  ngOnInit() {
    console.log('ngOnInit');

    this.formConfig = formConfig;
    this.path = path;
    this.fileDir = fileDir;

    this.addService.initialize(this.path);
    this.listService.initialize('categories');

  }

  ngAfterViewInit() {
    this.getData();
  }


  /**
   * Get data from database and set it to form
   * @param key
   */
  getData() {

    this.listService.getDataFromFirebase()
      .takeUntil(this.ngUnsubscribe)
      .subscribe(result => {

        if (!result.error) {
          if (result.data != null) {

            const categories = result.data as CategoryModel[];

            for (let i = 0; i < categories.length; i++) {
              this.categoryList.push({
                key: categories[i].key,
                label: categories[i].name,
                image: categories[i].image,
                value: true
              });
            }

            console.log('categoryList ' + JSON.stringify(this.categoryList));

            this.initializeForm();
          } else {
            console.log('error data');
          }
        } else {
          console.log('error key');
        }

      });
  }

  /**
   * Initialize value to forms
   * @param data
   */
  initializeForm() {
    console.log('initializeForm');

    let previousValid = this.form.valid;
    this.form.changes.subscribe(() => {
      if (this.form.valid !== previousValid) {
        previousValid = this.form.valid;
        this.form.setDisabled('submit', !previousValid);
      }
    });

    this.form.setValue('name', 'John Doe');
    this.form.setValue('category', this.categoryList);
    this.form.setDisabled('submit', true);

  }
}

，结果如下：