如何解决创建分组的列mat-table
我正在使用mat-table以表格格式显示数据。我想以分组列格式显示数据,如下图所示。 我在第一组和第二组中都有相同的列。我尝试过但无法实现相同目的。它只显示一列。 任何解决方案都将非常有用。谢谢。
import {Component} from '@angular/core';
export interface PeriodicElement {
symbol: string;
ol: {
put: number,call: number,ratio: number
},volume: {
put: number,ratio: number
}
}
const ELEMENT_DATA: PeriodicElement[] = [
{symbol: 'Hydrogen',ol: {
put: 777,call: 111,ratio: 111
},volume: {
put: 777,ratio: 111
}
},{symbol: 'Hydrogen',ratio: 111
}
}
];
@Component({
selector: 'table-basic-example',styleUrls: ['table-basic-example.css'],templateUrl: 'table-basic-example.html',})
export class TableBasicExample {
displayedColumns: string[] = ['symbol','ol','volume'];
dataSource = ELEMENT_DATA;
}
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<ng-container matColumnDef="ol">
<th mat-header-cell *matHeaderCellDef> OL </th>
<td mat-cell *matCellDef="let element"> {{element.ol.put}} </td>
<td mat-cell *matCellDef="let element"> {{element.ol.call}} </td>
<td mat-cell *matCellDef="let element"> {{element.ol.ratio}} </td>
</ng-container>
<ng-container matColumnDef="volume">
<th mat-header-cell *matHeaderCellDef> Volume</th>
<td mat-cell *matCellDef="let element"> {{element.volume.put}} </td>
<td mat-cell *matCellDef="let element"> {{element.volume.call}} </td>
<td mat-cell *matCellDef="let element"> {{element.volume.ratio}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。