Angular 15 Mat Table添加Footer行报错：Cannot read properties of undefined

问题根源 #

你遇到的"Cannot read properties of undefined (reading 'template')"错误，核心来自两个问题：

• 所有列定义（matColumnDef）都缺少页脚单元格模板，MatTable无法找到对应列的页脚渲染模板
• MatTableDataSource的初始化和赋值逻辑错误

修复步骤 #

1. 修正TS组件代码 #

@Component({
  selector: 'saa-prior-sales',
  templateUrl: './prior-sales.component.html',
  styleUrls: ['./prior-sales.component.css'],
  standalone: true,
  imports: [CommonModule, CurrencyPipe, MatTableModule],
})
export class PriorSalesComponent implements OnChanges {
  @Input() sales?: IVehicleDetails[];
  // 修正泛型：MatTableDataSource的泛型是单个数据项类型，不是数组
  dataSource = new MatTableDataSource<IVehicleDetails>();

  displayedColumns: string[] = [
    'model',
    'style',
    'eng',
    'trans',
    'miles',
    'price',
    'date',
  ];

  ngOnChanges(changes: SimpleChanges) {
    if (changes['sales']?.currentValue) {
      // 不要直接替换dataSource实例，而是更新其data属性
      this.dataSource.data = changes['sales'].currentValue;
      // 按日期降序排序
      this.dataSource.data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
    }
  }
}

2. 为每个列定义添加页脚单元格模板 #

在每个ng-container matColumnDef中，添加mat-footer-cell模板（即使是空内容，也需要定义基础结构）：

<div
  *ngIf="dataSource.data.length > 0"
  class="w-full p-6 mt-0 bg-white border border-gray-200 rounded-lg shadow md:mb-4 sm:mb-4 ng-star-inserted saa-green">
  <div class="p-2 mb-4 text-xl font-medium saa-blue">Prior Sales</div>
  <table mat-table [dataSource]="dataSource">
    <!-- Model Column -->
    <ng-container matColumnDef="model">
      <th mat-header-cell *matHeaderCellDef>Model</th>
      <td mat-cell *matCellDef="let sale">
        {{ sale.vehicle?.location }}
      </td>
      <!-- 添加页脚单元格模板 -->
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <!-- Style Column -->
    <ng-container matColumnDef="style">
      <th mat-header-cell *matHeaderCellDef>Style</th>
      <td mat-cell *matCellDef="let sale">{{ sale.lane }}/{{ sale.lot }}</td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <!-- Eng Column -->
    <ng-container matColumnDef="eng">
      <th mat-header-cell *matHeaderCellDef>Eng</th>
      <td mat-cell *matCellDef="let sale">
        {{ sale.eng }}
      </td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <!-- Trans Column -->
    <ng-container matColumnDef="trans">
      <th mat-header-cell *matHeaderCellDef>Trans</th>
      <td mat-cell *matCellDef="let sale">
        {{ sale.trans }}
      </td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <!-- Miles Column -->
    <ng-container matColumnDef="miles">
      <th mat-header-cell *matHeaderCellDef>Miles</th>
      <td mat-cell *matCellDef="let sale">
        {{ sale.miles }}
      </td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <!-- Price Column -->
    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef>Price</th>
      <td mat-cell *matCellDef="let sale">
        {{ sale.price | currency }}
      </td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <!-- Date Column -->
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let sale">
        {{ sale.date | date }}
      </td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

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

额外修正说明 #

• 修正了你之前HTML中多个列错误绑定sale.eng的问题（比如trans、miles、price列）
• 把*ngIf="dataSource"改成*ngIf="dataSource.data.length > 0"，避免数据源为空时渲染空表格
• 如果需要在页脚显示内容（比如合计），直接在对应的mat-footer-cell中添加内容即可，例如：

  <td mat-footer-cell *matFooterCellDef>Total:</td>
  <td mat-footer-cell *matFooterCellDef>{{ totalPrice | currency }}</td>
  

内容的提问来源于stack exchange，提问作者Sam Alexander