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

Question

我有一群学生，上面有他们的名字和成绩。

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

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

Answer 1

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

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