由另一个 ngFor 过滤 ngFor答案

【问题标题】：Filter ngFor by another ngFor由另一个 ngFor 过滤 ngFor
【发布时间】：2021-08-12 11:56:07
【问题描述】：

我正在开发一个应用程序，该应用程序必须通过课程过滤老师的学生。首先我做一个 ngFor 以在 div 中显示所有有老师的班级，之后我想用另一个 ngFor 添加该班级的所有学生。

类是一个空数组，学生是具有不同参数的对象。其中之一是 student.class。

是否可以使用读取 {{clase}} 和 {{student.classes}} 参数的 ngFor 过滤学生，并且只显示匹配的学生？

实际代码是这样的：

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

非常感谢

【问题讨论】：

您可以像这样根据班级ID过滤学生列表。 <ion-label *ngIf="class.id === student.classId"> {{student.first_name}} </ion-label> 所以基本上你必须匹配一个在课堂和学生中常见的键，即 class id。
pipe 是你想要的
要么你使用pipe来转换students，要么......我认为这是更好的方法，如果你定义另一个视图模型interface MyClass{ name: string; strudents: Student[] }
我做了 {{student.first_name}} 它可以过滤标签，但是我的问题是，当班级和 student.class 之间不匹配时它会创建空项目，并且我不能在同一个项目中使用 ngFor 和 NgIf
你说的 Thomas 是创建一个 [(ngModel)]="clase" 并像“让学生学习”一样做学生 *ngFor。对吗？

标签： angular ionic-framework filter ngfor

【解决方案1】：

正如 Deep Govany 在 cmets 中所说，我使用 *ngIf 来过滤 *ngFor，如下所示：

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

【讨论】：