Angular 4 Deeper Databind

Question

У меня есть запрос от базы данных, и ответ является объектом, который включает в себя гораздо больше данных. Результат ответа следующий:

ID:{} CATEGORY:{} USERNAME:{} etc...

У меня есть больше ТИП КАТЕГОРИИ (пользователь, суперпользователь), аналитик и т.д.Поэтому я не хочу писать все типы категорий по отдельности, я хочу связать это.

СЕЙЧАС мой код выглядит следующим образом:

<div *ngFor="let data of data.data ">
   <div *ngIf="data.category === 'analyst'">
      <mat-list>
      </mat-list>     
   </div>
</div>

<div *ngFor="let data of data.data ">
    <div *ngIf="data.category === 'user'">
        <mat-list>
        </mat-list>     
    </div>
</div>

Я бы хотел отобразить данные для пользователей следующим образом.

<div *ngFor="let data of data.data ">
   <div *ngIf="data.category === '{{data.category}}'">
      <mat-list>
      </mat-list>     
   </div>
</div>

Answer 1

Что вы можете сделать:

1. Итерировать ваш список данных
2. Push data.catgory в некотором массиве

3. Читать этот массив в HTML как:

   <div *ngFor = "let item in newArr"> <mat-list> </mat-list> </div>

Answer 2

Насколько я понимаю, вы пытаетесь получить доступ к свойству 'category' из объекта data , которое содержит ваш итератор data для сравнения.

В этом случае вам, вероятно, следует использовать другое имя переменной для вашей итерации, и это должно быть просто отлично;как,

<div *ngFor="let item of data.data ">
    <div *ngIf="item.category === data.category">
        <mat-list>
        </mat-list>     
    </div>
</div>