错误：无法读取未定义的属性(正在读取HeaderCell)-在角度材料表中创建反应形式 [英] Error: Cannot read properties of undefined (reading 'headerCell') - Creating reactive form inside a angular material table

问题描述

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

错误类型错误：无法读取未定义(正在读取)的属性 ‘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>

TS

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);
    }
  }

图片：

我错过了什么？

推荐答案

我不知道为什么角度显示您不相关错误ERROR TypeError: Cannot read properties of undefined (reading 'headerCell')。 但你的应用程序不工作的原因是你错过了关闭<div [formGroupName]="i">。您you can see here after this div is closed

这篇关于错误：无法读取未定义的属性(正在读取HeaderCell)-在角度材料表中创建反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！