要在Angular Material表格底部显示总计，你可以使用Angular Material的Table组件和Footer组件结合使用。

首先，你需要在Angular项目中安装和导入Angular Material库。然后，在你的组件中导入所需的Angular Material模块和组件：

import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';

接下来，定义你的表格数据和表头：

export interface TableData {
  name: string;
  quantity: number;
  price: number;
}

const DATA: TableData[] = [
  { name: 'Product A', quantity: 10, price: 100 },
  { name: 'Product B', quantity: 20, price: 200 },
  { name: 'Product C', quantity: 30, price: 300 },
];

const COLUMN_HEADERS: string[] = ['name', 'quantity', 'price'];

然后，在你的组件类中，定义表格的数据源、排序器和分页器：

export class YourComponent {
  dataSource = new MatTableDataSource(DATA);
  columnHeaders = COLUMN_HEADERS;

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }
}

在你的HTML模板中，使用mat-table元素来显示表格数据，并在底部添加一个mat-footer-row元素来显示总计行：

    
    
    


  
  
Name
    
{{ element.name }}
  

  
Quantity
    
{{ element.quantity }}
  

  
Price
    
{{ element.price }}
  

  
  


  
  


  
  

以上是一个简单的示例，显示了一个包含名称、数量和价格列的表格，以及一个分页器。总计行是根据mat-footer-row和*matFooterRowDef指令定义的。

当你运行应用程序时，你应该能够看到表格底部显示着总计行。确保正确导入和配置Angular Material组件，并根据你的需求调整表格的列和数据。