Question

我有一张用角材料设计的桌子。该表中显示了所有必需的标记，但是每次我运行该应用程序都会抛出

错误TypeError：无法读取未定义的属性“模板”

我已经检查并仔细检查了是否所有MatHeaderCellDefs都在那里，我检查了ngOnInit之后数据源是否以某种方式未定义，不是这种情况。我检查了我是否在某处打错了字，也不是。我知道这应该超级简单，但我一直在努力解决过去一个半小时以来的错误，现在仍然没有运气。有人可以看看我的代码，看看我是否错过了什么吗？同样，它不是数据源，那就是null。在GET请求期间，所有内容均可正确检索。

这里有HTML。

  <table mat-table [dataSource] ="produceNameList" class="mat-elevation-z8">
    <ng-container matColumnDef="produceName">
      <th mat-header-cell *matHeaderCelDef>Produce name</th>
      <td mat-cell *matCellDef="let produce">{{produce.produceName}}</td>
      <td mat-footer-cell *matFooterCellDef> Average </td>
    </ng-container>

    <ng-container matColumnDef="produceCount">
      <th mat-header-cell *matHeaderCellDef> Cost </th>
      <td mat-cell *matCellDef="let produce"> {{produce.produceCount}} </td>
      <td mat-footer-cell *matFooterCellDef> {{getAverage()}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
  </table>

这里有ts

  produceNameList: MatTableDataSource<ProduceMap> = null;

  displayedColumns = ['produceName', 'produceCount'];

  produceMapArray: ProduceMap[] = new Array<ProduceMap>();
  ngOnInit() {
    this.moderatorService.getProduceCountList().subscribe(result => { 
        (<any>Object).entries(result).forEach(entry => {
          this.produceMapArray.push(new ProduceMap(entry[0], entry[1]));  
        });
        this.produceNameList = new MatTableDataSource<ProduceMap>(this.produceMapArray);
    });
  }


  getTotal(): number{
    return this.produceMapArray.map(produceMap => produceMap.produceCount).reduce((acc, value) => acc + value, 0);
  }

  getAverage(): number{
    return this.getTotal() / this.produceMapArray.length;    
  }

谢谢

编辑：抱歉，忘记添加对象类

export class ProduceMap {
  constructor(public produceName: string, public produceCount: number){}
}

Answer 1

拼写错误：matHeaderCelDef

替换此

<th mat-header-cell *matHeaderCelDef>Produce name</th>

使用

 <th mat-header-cell *matHeaderCellDef>Produce name</th>

角材垫表抛出“模板未定义”错误

1 个答案: