角度分类并显示*ngFor中项目列表的标题

Question

我有一个对象数组：

[{name: "Mary", "salary": "22k", "category": "A", "dob": 1992},
{name: "Bob", "salary": "22k", "category": "A", "dob": 1994},
{name: "Paul", "salary": "22k", "category": "A", "dob": 1994},
{name: "Christy", "salary": "22k", "category": "A", "dob": 1993},
{name: "John", "salary": "22k", "category": "A", "dob": 1993},
{name: "Kenny", "salary": "22k", "category": "A", "dob": 1993},
}]

我正在使用*ngFor从模板中显示这些。但现在我需要根据dob进行分类(它将按照如图所示的顺序进行分组(，并将它们显示在1个标题下。

例如：

1992年玛丽

1994年Bob Paul

1993年Christy John Kenny

我可以通过匹配函数中的索引值或其他逻辑来实现这一点。但我们只需要通过*ngIf和*ngFor(或任何其他模板更改(来处理这一问题。有办法吗？

Answer 1

正如Ali Adravi所评论的，您可以使用Set从源数组中筛选出重复项。

在您的组件代码中：

const sourceArray = [...];
...
const years = [...new Set(sourceArray.map(item => item.dob))];
const categorizedItems = years.map(year => {
return {
year: year,
names: sourceArray.filter(item => item.dob === year)
}
});
...

然后在您的html文件中：

<div *ngFor="let item of items">
<div class="year">{{item.year}}</div>
<div *ngFor="let person of item.names">
<span class="personName">{{person.name}}</span>
</div>        
</div>

如果有帮助，请告诉我！

Answer 2

如果您想在绑定前格式化结果：

let arr = [{name: "Mary", "salary": "22k", "category": "A", "dob": 1992},
{name: "Bob", "salary": "22k", "category": "A", "dob": 1994},
{name: "Paul", "salary": "22k", "category": "A", "dob": 1994},
{name: "Christy", "salary": "22k", "category": "A", "dob": 1993},
{name: "John", "salary": "22k", "category": "A", "dob": 1993},
{name: "Kenny", "salary": "22k", "category": "A", "dob": 1993},
];
const years = [...new Set(arr.map(item => item.dob))];
const result = years.map(year => {
return {
year: year,
names:  (arr.filter(p => p.dob === year  ).map(j => j.name)).join(' ')
}
})
console.log(result);

一旦你格式化了数据，你就可以很容易地绑定它们，它将创建最终列表：

[
{ "year": 1992, "names": "Mary" },
{ "year": 1994, "names": "Bob Paul" },
{ "year": 1993, "names": "Christy John Kenny" }
]

Answer 3

我刚刚从另一篇文章中找到了这个解决方案。只需更新HTML：https://stackoverflow.com/a/58923774/4567978