javascript - 过滤 Angular 为4的给定数组而不使用另一个数组，并将其显示在同一组件中

我有一群学生，他们的名字和结果。

studentResults = [
{name: 'Adam', result : 'Passed'},
{name: 'Alan', result : 'Failed'},
{name : 'Sandy', result : 'Passed'},
{name: 'Max', result : 'Passed'},
{name : 'Woody', result : 'Failed'}];

我想在组件中显示左侧已通过考试和右侧未通过考试的学生列表。如何在不使用另一个数组的情况下过滤该数组并显示记录？

最佳答案

您可以创建一个filter管道并在模板中使用它，如下所示

@Pipe({
  name: 'filterByResult'
})
export class FilterByResultPipe implements PipeTransform {
  transform(value: number, result: 'Passed' | 'Failed', args?: any): any {
    return value.filter(student => student.result === result);
  }
}

在模板中

<div *ngFor="let student of studentResults | filterByResult: 'Passed'">
        {{student.name}}
<div>

<div *ngFor="let student of studentResults | filterByResult: 'Failed'">
        {{student.name}}
<div>