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

Question

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

错误类型错误：无法读取未定义的属性（读取“headerCell”）

这是我到现在为止得到的：

超文本标记语言

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

图像：

我缺少什么？

Answer 1

其他访问此页面的人可能的解决方案。由于似乎不同的原因，我遇到了同样的错误。

我没有为传递给 matHeaderRowDef 的所有列创建 matColumnDef。

即我传递了表两列“名称”和“描述”，但仅在 html 表中使用了“名称”。

我还可以通过从 displayedColumns 数组中删除“description”并保留 .html 文件不变来修复该错误。

组件.ts

@Component({
  selector: 'app-myComponent',
  templateUrl: './myComponent.component.html',
  styleUrls: ['./myComponent.component.scss']
})
export class myComponent implements OnInit {

  public displayedColumns = [
    "name",
    "description"
  ];

  public myData = [
    {
      "id": 1,
      "name": "A",
      "description": "This is A"
    },
    {
      "id": 2,
      "name": "B",
      "description": "This is B"
    }
  ];

  constructor() { }

  ngOnInit(): void {}
}

component.html（引发错误） 只有一个带有 matColumnDef="name" 的 ng-container。

<div class="list-container" fxFlex fxLayout="column" >

    <mat-table [dataSource]="myData">

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let myRowData; columns: displayedColumns"></mat-row>

        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef >Name</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
        </ng-container>

    </mat-table>

</div>

component.html（已工作） 现在有两个 ng-container。一种用于“名称”，另一种用于“描述”。

<div class="list-container" fxFlex fxLayout="column" >

    <mat-table [dataSource]="myData">

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let myRowData; columns: displayedColumns"></mat-row>

        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef >Name</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
        </ng-container>

        <!-- Note the additional ng-container below -->

        <ng-container matColumnDef="description">
            <mat-header-cell *matHeaderCellDef >Description</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.description}}</mat-cell>
        </ng-container>

    </mat-table>

</div>