mat-list 按同一类别和标题排列一次

Question

我有一个 mat-list，我正在显示其中包含数据的类别和名称。请注意堆栈闪电战： https://stackblitz.com/edit/angular-material-list-krzxrz?file=app%2Fapp.component.ts

我需要安排的是Fruits类别作为标题，下面是水果名称，然后与vegetables相同。

Answer 1

如果您想要实现的是在具有该类别名称的 header 下显示类别的每个项目，一种可能的方法是将 object 的数组分组（simpleItems ) 按名称然后使用 keyvalue 管道打印键后跟元素。

Here's a Stackblitz example.

希望对您有所帮助。