你可以使用mat-table
的ng-container
来定义第三列,并在其中使用插值表达式来计算两列值的乘积。
在HTML模板中,你可以像这样定义mat-table
并添加两列和第三列:
Column 1
{{element.column1}}
Column 2
{{element.column2}}
Column 3
{{element.column1 * element.column2}}
在组件类中,你需要定义数据源和显示的列:
import { Component } from '@angular/core';
export interface Data {
column1: number;
column2: number;
}
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
dataSource: Data[] = [
{column1: 2, column2: 3},
{column1: 4, column2: 5},
{column1: 6, column2: 7}
];
displayedColumns: string[] = ['column1', 'column2', 'column3'];
}
这样,第三列将显示两列值的乘积。