分组并显示Ionic App中JSON文件中的数据列表

Question

我正试图根据键值对(Designation=Doc(对数据列表进行分组。使用Ionic Angular的本地JSON数据。我的文件如下。

你能告诉我哪里出了问题吗？

我的JSON文件如下：

[
{
"Name": "John",
"Age": "20",
"Address":"AB",
"Designation": "Doc"
},
{
"Name": "Rob",
"Age": "21",
"Address":"CD",
"Designation": "Doc"
},
{
"Name": "Bob",
"Age": "28",
"Address":"CD",
"Designation": "Architect"
},
{
"Name": "James",
"Age": "22",
"Address":"CD",
"Designation": "Architect"
},
{
"Name": "Mark",
"Age": "41",
"Address":"CD",
"Designation": "Engineer"
},
{
"Name": "Thames",
"Age": "31",
"Address":"CD",
"Designation": "Architect"
}
]

我在ts文件中的脚本如下：

private readonly URL = 'assets/data/week.json';
this.httpClient.get(this.URL)
.subscribe((res: any) => {
this.items = res;
},
error=>{
console.log(error);// Error getting the data
} );

我的html文件如下：

<ion-list *ngFor="let item of items" (click)="itemTapped($event, item)" >
<ion-item>
<ion-avatar item-start >
<img  src="{{item.icon}}"> 
</ion-avatar>
</ion-item>
</ion-list>

Answer 1

我已经用下面的解决方案解决了这些查询。

<ion-list>
<ng-container *ngFor="let item of items">
<ion-item *ngIf="item.Designation == 'Architect'" (click)="itemTapped($event, item)" >
<ion-item>
<ion-avatar item-start >
<img  src="{{item.icon}}"> 
</ion-avatar>
</ion-item>
</ion-list>