core.js:6014 错误类型错误：无法读取未定义的属性“模板”

Question

查看类似错误的响应后，我可以看到该错误与 *ma​​tHeaderCellDef 的使用有关 我正在编写的代码结合了许多不同的功能。我有一个表，它结合了动态数据以及我想在表单组中组合的表单元素。 任何帮助将不胜感激。

我的代码如下。

<form [formGroup]="userTable">
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> Sr. No. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>

<ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef> Category </th>
    <td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>


<ng-container matColumnDef="points">
    <th mat-header-cell *matHeaderCellDef> Points </th>
    <td mat-cell *matCellDef="let element"> {{element.points}} </td>
</ng-container>

<ng-container matColumnDef="w1" formArrayName="tableRows" *ngFor="let group of getFormControls.controls ; let i=index">
    <th mat-header-cell *matHeaderCellDef>Week 1</th>
    <!--<td mat-cell *matCellDef="let element;">{{element.w1}}</td>-->
    <td *ngIf="group.get('isEditable').value" [formGroupName]="i">
        <mat-form-field>
            <input matInput type="text" formControlName="patent">
        </mat-form-field>
    </td>
    <td *ngIf="group.get('isEditable').value" [formGroupName]="i">
        <mat-form-field>
            <input matInput type="text" formControlName="collective_actions">
        </mat-form-field>
    </td>

</ng-container>

<ng-container matColumnDef="header-row-first-group">
    <th mat-header-cell *matHeaderCellDef 
        [style.text-align]="center"
        [attr.colspan]="3"> 
    First group 
    </th>
</ng-container>    

<ng-container matColumnDef="header-row-second-group">
    <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Second group </th>
</ng-container>

<tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

以下是我的 TS 文件：

export class PsdGamificationComponent implements OnInit {
  
  dataSource:MatTableDataSource<categories>;  
  public displayedColumns: string[] = ['id','category', 'points', 'w1'];

  userTable: FormGroup;
  control: FormArray;
  mode: boolean;
  touchedRows: any;
  constructor(private fb: FormBuilder) { }

  ngOnInit()
  {
    this.dataSource = new MatTableDataSource<categories>(column_data);
    this.touchedRows = [];
    this.userTable = this.fb.group({
      tableRows: this.fb.array([])
    });
    this.addRow();
  }

  ngAfterOnInit() {
    this.control = this.userTable.get('tableRows') as FormArray;
  }

  initiateForm(): FormGroup {
    return this.fb.group({
      patent: ['', Validators.required],
      collective_actions: ['', Validators.required],
      standardization: ['', [Validators.required]],
      automation: ['', [Validators.required]],
      certification: ['', [Validators.required]],
      customer_appreciation: ['', [Validators.required]],
      csr_external: ['', [Validators.required]],
      csr_internal: ['', [Validators.required]],
      alm_updates: ['', [Validators.required]],
      delivery_commitment: ['', [Validators.required]],
      trt: ['', [Validators.required]],
      kt_external: ['', [Validators.required]],
      kt_internal: ['', [Validators.required]],
      inc_pbi: ['', [Validators.required]],
      learning_hours: ['', [Validators.required]],
      crqs: ['', [Validators.required]],
      wos: ['', [Validators.required]],
      standup: ['', [Validators.required]],
      timesheet: ['', [Validators.required]],
      ms_teams: ['', [Validators.required]],
      isEditable: [true]
    });
    }

代码可在 StackBlitz 上找到。 https://stackblitz.com/edit/angular-ivy-xhtgrz

Answer 1

错误是由于在<td> 中缺少*matCellDef