角材料:如何将数据映射到角材料表中的标头？

Question

如何将动态数据映射到角材料表中各自的标头上？我有这样的情况:按类别过滤数据(在parcelItems下总是有2个类别，但没有排序)，如下所示。在本例中，、Wears、和附件是标题。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;
        })
  }
}

我不知道你到底想要实现什么，所以我贴出了一些功能，可以让你总体上获得独特的分类，按元素或项目分类。

希望这能帮你继续。