角度材质:如何将数据映射到角度材质表中的标题

Question

如何将动态数据映射到角度材质表中的各个标题？我有按类别过滤数据的情况(在parcelItems下总是有2个类别，但没有排序(，类似于下面的内容。在这种情况下，穿戴和附件是标题。Api响应未在后端进行排序。我怎样才能做到这一点？

这是代码：stackblitz

样本

|---------------------|------------------------------|
|  Heading 1 (Wears)  |   Heading 2 (Accessories)    |
|---------------------|------------------------------|
|      jeans          |         earphones            |
|---------------------|------------------------------|
|      t-shirt        |         motherboard          |
|---------------------|------------------------------|

sample.json

const ELEMENT_DATA: Array<Data> = [
{
fname: "Mark",
lname: "jhony",
parcels: [
{
parcelId: 123,
parcelName: "parcel1",
parcelItems: [
{ 
name: "jeans",
category: "wears",
qty: 2
},
{ 
name: "earphones",
category: "accessories",
qty: 4
},
]
},
{
parcelId: 144,
parcelName: "parcel2",
parcelItems: [
{ 
name: "motherboard",
category: "accessories",
qty: 5
},
{ 
name: "t-shirt",
category: "wears",
qty: 7
},
]
}
]
}
];

Answer 1

检查以下代码：

/**
* @title Basic use of `<mat-table>` (uses display flex)
*/
@Component({
selector: 'table-basic-flex-example',
styleUrls: ['table-basic-flex-example.css'],
templateUrl: 'table-basic-flex-example.html',
})
export class TableBasicFlexExample implements OnInit {
displayedColumns: string[] = ['fname', 'lname', 'parcels'];
dataSource = ELEMENT_DATA;
categories: any[] = [];
ngOnInit() {
this.dataSource.forEach(
(element) => {
this.categories = this.categories.concat(
this.getCategoriesByElement(element)
);
}
);
this.categories = this.categories.
filter( // Get unique items only
(v, i, a) => a.indexOf(v) === i);
console.log(this.categories);
}
getCategoriesByElement(element): any[] {
var elementCategories = [];
element.parcels.forEach(
(parcel) => {
elementCategories = elementCategories.concat(this.getCategoriesByParselItems(parcel.parcelItems));
}
);
return elementCategories;
}
getCategoriesByParselItems(parcelItems: any[]) {
return parcelItems
.map( // Get category only
(item) => {
console.log(item.category);
return item.category;
})
}
}

我不确定你到底想实现什么，所以我发布了一些功能，可以让你按元素、按包裹或按物品获得独特的类别。

希望这能帮助你继续前进。