在以角度5显示在组件中之前过滤数据

Question

我有来自api的足球数据列表。

当我请求此api端点时，会显示所有可用列表。我试图根据游戏的状态分离列表。例如。完成，推迟，定时。

我试过这样的事情

<div *ngFor="let fixture of fixtures">
    <div *ngIf="fixture.status !== 'FINISHED'">
        <p>{{fixture.date}}</p>
    </div>
</div>

它会被过滤，但不会在视图中显示，但不会完全过滤。现在的问题是，由于列表太长，我只想显示前20项，我的工作如下：

<div *ngFor="let fixture of fixtures | slice:0:20">
    <div *ngIf="fixture.status !== 'FINISHED'">
        <p>{{fixture.date}}</p>
    </div>
</div>

因为它应该只显示过滤项目列表中的前20个项目，但它没有。它没有显示任何列表，因为列表仍然没有被过滤。

现在我认为我现在过滤的方式不是正确的方法。由于它只在视图中被过滤而在来自api的列表中没有被过滤，所以当我尝试对列表进行切片时，它不会像这样工作。

如果有人能帮助我实现这一点，请告诉我。提前谢谢。

Answer 1

不要使用slice这样的管道，它与您的*ngIf一起运行良好;它对过滤结果集一无所知，只知道原始列表。

在我提供解决方案之前，请查看slice管道的源代码，了解它在列表内部的工作原理：

@Pipe({name: 'slice', pure: false})
export class SlicePipe implements PipeTransform {
  transform(value: any, start: number, end?: number): any {
    if (value == null) return value;

    if (!this.supports(value)) {
      throw invalidPipeArgumentError(SlicePipe, value);
    }

    return value.slice(start, end);
  }

  private supports(obj: any): boolean { return typeof obj === 'string' || Array.isArray(obj); }
}

如您所见，它接收一个原始列表（在这种情况下将是过滤结果集），然后它将其切片。

来源：Angular.io

要解决您的问题，请在您的组件中进行过滤，然后在模板中循环显示已过滤的结果。然后，只有这样才能应用slice管道。

这样效率更高（因为您不必在组件中不必要地循环），并允许您在筛选列表上运行更多操作，因为您已将它们缓存。

<强>组件：

@Component({...})
export class MyComponent {
    list: any[] = [...];
    fixtures: any[] = this.list.filter(item => item.status !== 'FINISHED');
}

<强>模板：

<div *ngFor="let fixture of fixtures | slice:0:20">
    <p>{{fixture.date}}</p>
</div>

<强>更新

要解决搜索问题，请搜索原始列表，而不是搜索过滤列表。