Угловой материал: как сопоставить данные с заголовками в таблице угловых материалов?

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;
        })
  }
}

Я не уверен, что именно вы хотите достичь, поэтому я опубликовал некоторые функции, которые могут дать вам уникальные категории в целом, по элементам по частям или по элементам.

Надеюсь, это поможет вам продолжить.