angular - 角材:角材テーブルのヘッダーにデータをマップする方法は?

Question

angularマテリアルテーブルのそれぞれのヘッダーに動的データをマップする方法は? 以下のように、カテゴリ別にデータをフィルタリングするケースがあります（parcelItemsの下には常に2つのカテゴリがありますが、ソートされていません）。この場合、 WearsとAccessoriesがヘッダーです。API レスポンスがバックエンドでソートされません。どうすればこれを達成できますか?

コードは次のとおりです。

サンプル

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

サンプル.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
        },
      ]
    }
  ]
}
];