Typescript 垫表页脚角v15

<编码>*matFooterRowDef中指定的所有单元格必须在<编码>matColumnDef内有<编码>*matFooterCellDef

<编码>  <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>100</td> <!--  must be present if you have the property in matFooterRowDef array! --> 
  </ng-container>

编码

<编码>import { CommonModule } from '@angular/common';
import { Component, SimpleChanges } from '@angular/core';
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div
  *ngIf="dataSource"
  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">
      <!-- Location -->
      <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>100</td>
      </ng-container>

      <!-- LaneLot 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>100</td>
      </ng-container>

      <!-- VIN 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>100</td>
      </ng-container>

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

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

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

      <!-- VIN 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>100</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>
  `,
  imports: [CommonModule, MatTableModule],
})
export class App {
  sales?: any[] = [
    {
      model: 'test',
      style: 'test',
      eng: 'test',
      trans: 'test',
      miles: 'test',
      price: 'test',
      date: 'test',
    },
  ]; //New Interface for Sale
  //Sort these in descending Date (table cannot be sorted)
  dataSource = new MatTableDataSource<any[]>();

  displayedColumns: string[] = [
    'model',
    'style',
    'eng',
    'trans',
    'miles',
    'price',
    'date',
  ];
  ngOnChanges(changes: SimpleChanges) {
    const vehicleList = changes['sales'].currentValue;
    this.dataSource = vehicleList;
  }
}

bootstrapApplication(App);

stackblitz个