下面是一个使用Angular 7解决在JSON数组中列出唯一项的示例代码:
首先,创建一个名为unique-items.component.ts
的组件文件,并添加以下代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-unique-items',
templateUrl: './unique-items.component.html',
styleUrls: ['./unique-items.component.css']
})
export class UniqueItemsComponent {
items: any[] = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 1, name: 'Item 1' }, // duplicate item
{ id: 4, name: 'Item 4' }
];
uniqueItems: any[];
constructor() {
this.uniqueItems = this.getUniqueItems(this.items);
}
getUniqueItems(items: any[]): any[] {
return items.filter((item, index, self) =>
index === self.findIndex((t) => (
t.id === item.id && t.name === item.name
))
);
}
}
接下来,创建一个名为unique-items.component.html
的HTML模板文件,并添加以下代码:
-
{{ item.name }}
最后,在你的应用中使用UniqueItemsComponent
组件即可。比如,在app.component.html
中添加以下代码:
这样,你就可以在应用中看到一个只列出唯一项的列表。
注意:以上示例假设你已经安装了Angular 7,并且在你的应用中已经正确引入了组件。如果你还没有安装Angular 7,可以使用Angular CLI运行ng new
命令来创建一个新的Angular项目。