无法以 Angular 形式的嵌套形式读取 null 的属性（读取 'controls'）

Question

我是 angular 的新手。致力于在 angular 中创建嵌套表单，我在获取基于如下所示 JSON 结构的某些字段的控件时遇到困难，在获取控件 assetsList -> description section[= 时遇到困难15=]

data = {
    headline: [
      {
        language: 'en',
        headlineText: 'example headline',
      },
    ],
    bodyText: [
      {
        language: 'en',
        bodyText: 'example bodytext',
      },
    ],
    location: {
      name: 'mkontheway',
      openingHours: [
        {
          day: 'Mon-frd',
          timing: '10.00PM-9AM',
        },
      ],
      address: {
        postCode: 'test',
        country: 'test',
      },
    },
    assetsList: [
      {
        description: [
          {
            language: 'En',
            text: 'Sports News Updated',
          },
        ],
        assetType: 'Description',
        assetLink: 'NewsLink',
        filePath: 'Not yet fill',
      },
    ],
  };

我为此创建了一个 Stackblitz 请帮我解决这个错误

StackBlitz link

Answer 1

assetsListDescriptionFormData 可以不是 getter 因为你需要指出 assetsList 的“索引”——你在另一个 FormArray 中有一个 FormArray——否则你需要一个函数传递索引

getAssetsListDescriptionFormData(index:number) {
    return <FormArray>this.assetsListFormData.at(index).get('description');
}

并使用

<div formArrayName="description" style="position: relative;">
   <div *ngFor="let description of 
              getAssetsListDescriptionFormData(assetsListGroup).controls; 
              let assetsListDescriptionGroup=index">
        
      <div class="form-fields-wrapper" [formGroupName]="assetsListDescriptionGroup">
              ...
      </div>
   </div>
</div>