错误：无法读取未定义的属性（读取“headerCell”） - 在角度材料表中创建反应形式答案

【问题标题】：Error: Cannot read properties of undefined (reading 'headerCell') - Creating reactive form inside a angular material table错误：无法读取未定义的属性（读取“headerCell”） - 在角度材料表中创建反应形式
【发布时间】：2022-02-08 21:12:55
【问题描述】：

我正在尝试创建一个具有反应形式的角材料表。我需要添加一些属性，所以我使用的是 formArray。但是我的表格没有显示任何结果，并且角度让我返回相同的错误：

ERROR TypeError: Cannot read properties of undefined (reading 'headerCell')

这是我到目前为止得到的：

HTML

<button mat-button mat-raised-button (click)="addParameterWhatsApp()" color="primary">Add</button>

    <form [formGroup]="form" autocomplete="off">
    
      <table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8" formGroupName="whatsapp">
        <ng-container formArrayName="parameters">
          <ng-container *ngFor="let dados of parameters.controls; let i = index ">
    
            <div [formGroupName]="i">
    
              <ng-container matColumnDef="posicao">
                <th mat-header-cell *matHeaderCellDef> Posicao </th>
                <td mat-cell *matCellDef="let element">
                  <mat-form-field appearance="outline">
                    <mat-label>Posicao</mat-label>
                    <input matInput formControlName="posicao">
                  </mat-form-field>
                </td>
              </ng-container>
    
              <ng-container matColumnDef="valor">
                <th mat-header-cell *matHeaderCellDef>Valor</th>
                <td mat-cell *matCellDef="let element">
                  <mat-form-field appearance="outline">
                    <mat-label>Valor</mat-label>
                    <input matInput formControlName="valor">
                  </mat-form-field>
                </td>
              </ng-container>
          </ng-container>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </form>

form!: FormGroup;
  dataSource;
  displayedColumns = ['posicao', 'valor'];
  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.createForm();
  }

  createForm() {
    this.form = this._formBuilder.group({
      whatsapp: this._formBuilder.group({
        name: [],
        parameters: this.buildArrayParametersWhatsApp(),
      }),
    });
  }

  get parameters() {
    return this.form.get('whatsapp')?.get('parameters') as FormArray;
  }

  buildArrayParametersWhatsApp() {
    return this._formBuilder.array([]);
  }

  addParameterWhatsApp() {
    const parametersArray = this._formBuilder?.group({
      posicao: [],
      valor: [],
    });

    if (parametersArray) {
      this.parameters.push(parametersArray);
    }
  }

图片：

我错过了什么？

【问题讨论】：

这个错误是来自材料本身吗？你能分享错误的截图吗？因为没有变量试图到达 undefined.headerCell？
我知道对吗？我也不明白。我用截图更新了问题
i 是索引，这可能是问题吗？
我不这么认为，我在使用formarray时总是使用这个div。但这是我第一次在表格中做一个表格
我更改了一些代码并创建了另一个问题，这次控制台中没有错误stackoverflow.com/questions/70795052/…