我用ngfor制作了手风琴,当您单击面板上的表格时。
在Mat排序旁边,一切都按预期工作,仅对第一张表进行排序。
我读到我需要在每个表中放入模板引用变量,但是我该如何动态地执行它呢?或通过其他方式实现这一目标。
这是我的代码:
<mat-accordion style="width: 80%">
<mat-expansion-panel *ngFor="let customer of customers; let i = index" (opened)="openPanel(customer);">
<mat-expansion-panel-header>
<mat-panel-title>
{{customer.name}}
</mat-panel-title>
<mat-panel-description>
<span style="text-align:center">{{" Active Calls: " + customer.active}}</span>
<span style="margin-left: 100px;">{{" Talking Calls: " + customer.talking}}</span>
</mat-panel-description>
</mat-expansion-panel-header>
<table #HERE-I-NEED-TO-PUT-DYNMIC-ID mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container *ngFor="let column of tableColumns;" matColumnDef="{{column.field}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.name}} </th>
<td mat-cell *matCellDef="let element">
<span *ngIf="column.field !== 'answered'"> {{element[column.field]}} </span>
<span *ngIf="column.field === 'answered' && element[column.field] > 0">{{getTime(element[column.field] * 1000) | date: 'HH:mm:ss'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-expansion-panel>
谢谢。
答案 0 :(得分:1)
我用方括号解决了这个问题。
代码如下。
<ng-container *ngFor="let col of cols" [matColumnDef]="col">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ col }} </th>
<td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
</ng-container>
答案 1 :(得分:0)
我以这种方式解决了,这对我有用!角度为7
Student * students = new Student[numberOfStudents]; [...]; delete [] students;
--------- .ts file ---------
export interface PeriodicElement {
position: number,
profileImg: string;
name: string;
}
// this is to get reference of sort table components
@ViewChildren(MatSort) sort = new QueryList<MatSort>();
ngAfterViewInit() {
// this is to control all sort elements
this.allDataSource.forEach((dataSource, index) => {
dataSource.sort = this.sort.toArray()[index];
});
}
public configStudentsList: any[] = [
{
id: 1,
studentAmount: '3',
date: '03/04/2020 1:43:43 pm',
dataSource: [
{ position: 1, profileImg: "https://bolavip.com/__export/1580908233923/sites/bolavip/img/2020/02/05/messi-barcelona_crop1580908232023.jpg_1902800913.jpg", name: 'Hydrogen' },
{ position: 2, profileImg: "https://bolavip.com/__export/1580908233923/sites/bolavip/img/2020/02/05/messi-barcelona_crop1580908232023.jpg_1902800913.jpg", name: 'Helium' },
{ position: 3, profileImg: "https://bolavip.com/__export/1580908233923/sites/bolavip/img/2020/02/05/messi-barcelona_crop1580908232023.jpg_1902800913.jpg", name: 'Lithium' }
]
},
{
id: 2,
studentAmount: '11',
date: '30/05/2020 13:43:43 pm',
dataSource: [
{ position: 1, profileImg: "https://thumbs.dreamstime.com/b/el-ejemplo-del-vector-de-disney-mickey-mouse-aisl%C3%B3-en-fondo-blanco-134953070.jpg", name: 'Pedro' },
{ position: 2, profileImg: "https://thumbs.dreamstime.com/b/el-ejemplo-del-vector-de-disney-mickey-mouse-aisl%C3%B3-en-fondo-blanco-134953070.jpg", name: 'ernesto' }
]
}, {
id: 3,
studentAmount: '9',
date: '12/04/2020 2:43:43 pm',
dataSource: [
{ position: 2, profileImg: "https://www.lainformacion.com/files/article_default_content/uploads/2019/02/16/5c683ab9757a9.jpeg", name: 'lisa' },
{ position: 3, profileImg: "https://www.lainformacion.com/files/article_default_content/uploads/2019/02/16/5c683ab9757a9.jpeg", name: 'luis' },
{ position: 4, profileImg: "https://www.lainformacion.com/files/article_default_content/uploads/2019/02/16/5c683ab9757a9.jpeg", name: 'julian' }
]
}
];
allDataSource: any = [];
ngOnInit(): void {
//This is to manipulate all sort elements into (ngfor)
let tableD: PeriodicElement[] = [];
this.configStudentsList.forEach((myObject, index) => {
let tableD: PeriodicElement[] = [];
myObject.dataSource.forEach((source, index) => {
tableD.splice(index, 0, source);
});
//for each table initialize a new MatTableDataSource object
this.allDataSource.splice(index, 0, new MatTableDataSource(tableD));
});
}