Angular 4更深的数据绑定

Question

I have a request from database, and the response is an object, what is included much more data The response result is the next:

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

I've got more CATEGORY TYPE ( user, superuser, analyst, etc... ) I would like to bind the category as like a normal bind. So I don't want to write all category type it individually, I want to bind it.

NOW my code looks like this:

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

I would like to display data for users on the next way.

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

Answer 1

As far as I understand, you are trying to access the property, 'category' from the object, data , which contains your iterator data for comparison.

In that case, you should probably use a different variable name for you iteration and it should be just fine; like,

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

Answer 2

What you can do is :

1. Iterate your data list
2. Push data.catgory in some array

3. Read that array in HTML as:

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