0

我有 2 个组件。我想将数据从父组件传递到子组件并根据父组件中的下拉选项选择生成子 html。

这是我的父组件 html

<select
  class="form-control"
  formControlName="optionType"
  (change)="onItemSelect($event)"
>
  <option value="">- Select -</option>
  <option *ngFor="let value of values" [ngValue]="value.id">
    {{ value.itemName }}
  </option>
</select>
<app-child-component *ngIf="info.length>0" [info]="info"></app-child-component>

这是我的父组件类

基于这种onItemSelect(event: any)方法，我想为this.info.

  onItemSelect(event: any) {
    if (this.value === 'value1') {
      this.service.getDetails().subscribe(
        (res) => {
          this.info = res;
        },
        (err) => {
          console.log(err);
        },
      );
    }
  }

这是我的子组件文件

@Input() info: Info[];
 ngOnChanges(changes: SimpleChanges): void {
    console.log(this.info);
    this.createForm();
  }

这是表格

  createForm() {
    const group = {};
    this.info.forEach((field) => {
      group[field.label] = new FormControl('');
    });
    this.fieldForm = new FormGroup(group);
  }

在此方法中选择值后onItemSelect($event)。我可以在子组件中看到值console.log(this.info) 但是子组件 html 没有加载。这是什么原因以及如何根据下拉值选择加载子组件 html。

4

0 回答 0