Группировать и отображать список данных из файла JSON в приложении Ioni c - PullRequest
Новая
       33

Группировать и отображать список данных из файла JSON в приложении Ioni c

0 голосов
/ 04 августа 2020

Я пытаюсь сгруппировать список данных на основе пары ключ-значение (Обозначение = Do c). Локальные JSON данные с использованием Ioni c Angular. Мои файлы указаны ниже.

Не могли бы вы подсказать, где я ошибаюсь?

Мой 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>

1 Ответ

0 голосов
/ 09 августа 2020

Я решил вопросы с помощью решения ниже. 

<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>
...