Angular 18报错：找不到ID为'complete'的列，求解决

你的报错是因为app.component.html模板里存在两处拼写/语法错误：

• 定义"complete"列的指令拼写错误：将matColumnDef误写为matColumDef（缺少字母n）
• <tr mat-row>的*matRowDef表达式末尾多了一个多余的双引号

修正后的app.component.html代码如下：

<div class="tableContainer">
   <table mat-table [dataSource]="items" class="mat-elevation-z3 fullWidth">
      <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>#</th>
         <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>
      </ng-container>
      
      <ng-container matColumnDef="task">
         <th mat-header-cell *matHeaderCellDef>Task</th>
         <td mat-cell *matCellDef="let item">{{ item.task }}</td>
      </ng-container>
      
      <ng-container matColumnDef="complete">
         <th mat-header-cell *matHeaderCellDef>Done</th>
         <td mat-cell *matCellDef="let item">{{ item.complete }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['id', 'task', 'complete']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['id', 'task', 'complete']"></tr>
   </table>
</div>

修正说明：

1. 将matColumDef="complete"改为matColumnDef="complete"，确保Angular能识别这个列定义
2. 移除*matRowDef末尾的多余双引号，修复语法错误

你的其他代码（app.component.ts、todoItem.ts、todoList.ts）逻辑和定义都是正确的，修正模板后即可解决该报错。

内容的提问来源于stack exchange，提问作者Aurélien Plazzotta