在 Ionic App 中对 JSON 文件中的数据进行分组和显示列表答案

【问题标题】：Group and Display list of data from a JSON file in Ionic App在 Ionic App 中对 JSON 文件中的数据进行分组和显示列表
【发布时间】：2020-11-24 19:02:24
【问题描述】：

我正在尝试根据键值对（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>

【问题讨论】：

标签： json ionic-framework

【解决方案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>

【讨论】：