Mat-显示新数组的表格
Mat-显示新数组的表格
提问于 2019-04-27 18:10:00
我正在从后端下载包含类别，名称和类别类型的对象类别。我想展示几个垫子，每个垫子对应不同的类型。当我显示所有类别时，我没有任何问题，但我想创建新的mat-table对象来单独显示表。控制台显示对象已正确创建，但未在HTML中显示-该位置为空
displayedColumns: string[] = ['position', 'name', 'watki', 'id'];
categories: Category[] = [];
programmingCategories: Category[] = [];
constructor(private categoryService: CategoryService,
private _router: Router) {
}
ngOnInit() {
this.getCategories();
}
private getCategories() {
this.categoryService.getAllCategories().subscribe((categories: any) => {
this.categories = categories._embedded.categories;
for(let i of this.categories)
if(i.categoryType ==='Programowanie') {
this.programmingCategories[i.id-1] = i;
}
}
});
}<table mat-table [dataSource]="programmingCategories" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Programowanie </th>
<td mat-cell *matCellDef="let category">
<mat-icon mat-list-icon>assignment</mat-icon>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Kategoria</th>
<td class="link" mat-cell *matCellDef="let category" (click)="getTopics(category)">
{{category.title}}
</td>
</ng-container>
<ng-container matColumnDef="watki">
<th mat-header-cell *matHeaderCellDef> Liczba wątków</th>
<td mat-cell *matCellDef="let category">
{{category.size}}
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Ostatni post</th>
<td mat-cell *matCellDef="let category">
<table><tr><td height="20" class="link">{{newestPost[category.id]?.topic?.title}}</td></tr>
<tr><td height="20">Przez {{newestPost[category.id]?.postAuthor?.username}}</td></tr>
<tr><td height="20" style="font-size:10px"> {{newestPost[category.id]?.createdDate | date: 'medium'}}</td></tr>
</table>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>回答 1
Stack Overflow用户
发布于 2019-12-18 01:02:42
我知道这很古老，但如果有人需要这样做的话。我没有使用上面的例子，所以你可以把它复制/粘贴到一个新的angular项目中。
我所做的是在我们的表中使用一个方法作为数据源，该方法根据从表中传入的参数来过滤组件中的完整数据集。
该表通过对“ngFor”数组中的值执行位置操作来获取要传递的参数，这将是我们希望用来拆分表的数据。这可以是硬编码的(讨厌！)如本例所示，或者您可以将其设置为动态填充的数组(耶！)。
在您的模块中，对于本例，从@angular/ MatTableModule导入材料。
在我们的app.component.ts
export class AppComponent {
outputData = [{ name: 'Alpha', position: 'front' },
{ name: 'Beta', position: 'back' },
{ name: 'Gamma', position: 'front' },
{ name: 'Delta', position: 'back' }];
positions = ['front', 'back'];
sourceData(position: string) {
return this.outputData.filter(data => data.position === position);
}
}在app.component.html中
<table mat-table *ngFor="let position of positions" [dataSource]="sourceData(position)">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let output"> {{ output.name }} </td>
</ng-container>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Position </th>
<td mat-cell *matCellDef="let output"> {{ output.position}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['position', 'name']"></tr>
<tr mat-row *matRowDef="let row; columns: ['position', 'name'];"></tr>
<table>https://stackblitz.com/edit/angular-pjyasx
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55879433
复制相关文章
相似问题
腾讯云开发者
