简体   繁体   中英

Filter ngFor by another ngFor

I am developing an app that has to filter the students of a teacher through classes. First I do a ngFor to show in a div all the clases that has the teacher, after I want to add all the students in that class with another ngFor.

The clases are an empty array an the students are objects with different parameters. One of it is the student.class.

Is it possible to filter the students with a ngFor that reads the {{clase}} and {{student.classes}} parameters and only shows the students who match?

The actual code is this:

<div *ngFor="let clase of clases">
  <mat-card>
    <mat-card-header>
      <mat-card-title>{{clase}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <ion-item *ngFor="let student of students" >  
        <ion-label>
          {{student.first_name}}
        </ion-label>
      </ion-item>
    </mat-card-content>
  </mat-card>
</div>

Thank you very much

As Deep Govany sais in the comments I used *ngIf to filter the *ngFor like this:

<div *ngFor="let clase of clases">
  <mat-card>
    <mat-card-header>
      <mat-card-title>{{clase}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div *ngFor="let student of students">  
        <ion-item *ngIf="clase === student.classroom">       
          {{student.first_name}}
        </ion-item> 
      </div>
    </mat-card-content>
  </mat-card>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM