angular - 角度 7 - json 数组中唯一项目的列表
问题描述
我有一个如下所示的 json 数组,
items=[
{name:"first",subname:"first 1"},
{name:"first",subname:"first 2"},
{name:"first",subname:"first 3"},
{name:"second",subname:"second 1"},
{name:"second",subname:"second 2"}
];
我想显示为列表,
first
first 1
first 2
first 3
second
second 1
second 2
虽然我通过在 component.ts 中放置两个函数来实现这一点
getsubname(name){
return this.items.filter(
function(data){return data.name == name}
);
}
getnames(){
var disname = this.items.map(item => item.name)
.filter((value, index, self) => self.indexOf(value) === index)
return disname
}
并将它们放在 HTML 中,如下所示,
<div>
<mat-list>
<ng-container *ngFor="let item of getnames()">
<mat-list-item>{{item}}</mat-list-item>
<mat-list style="margin-left:30px;">
<div *ngFor="let subItem of getsubname(item)">
<mat-list-item >{{ subItem.subname }}</mat-list-item>
</div>
</mat-list>
</ng-container>
</mat-list>
</div>
但是这种方法看起来很幼稚。我确信必须有更好的方法来做到这一点。请建议。
解决方案
您可以创建一个函数以减少到一个对象,然后存储在一个变量中。
values = {};
getValues (){
return this.items.reduce((acc , prev) => {
let ele = prev.name;
if (!acc[ele]) {
acc[ele] = [];
}
acc[ele].push(prev.subname);
return acc;
}, {});
}
ngOnInit() {
this.values = this.getValues();
}
在您的 HTML 中,您可以使用键值管道进行迭代。
<div>
<ul *ngFor="let item of values | keyvalue">
{{ item.key }}
<li *ngFor='let val of item.value'>
{{ val }}
</li>
</ul>
</div>
推荐阅读
- animation - Flutter中stack的children声明有什么区别
- java - 调用通知数据集后适配器未更新
- listview - Xamarin 表单:如何在列表视图中获取选定的选择器模型数据?
- android - Image not displayed on some devices (Using Quasar Framework)
- swift - Swift Present Model ViewController 不显示 UINavigationBar?
- hibernate - Servicemix 7 Hibernate 5 javax.persistence.PersistenceException:EntityManager 没有持久性提供程序
- python - 通过使用字符串格式连接其他两个列来创建一个新列
- spring-boot - 如何返回文件和对象,其中包含有关 Spring 中文件的一些信息?
- asp.net-mvc - 在 ASP.NET MVC 项目中刷新后,React 链接页面变为 404
- node.js - 如何避免 Outlook 的自动换行删除?