Question

应用以下自定义管道来过滤项目数组：

import {Injectable, Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'filterHeaders',
  pure: false
})
@Injectable()
export class FilterHeadersPipe implements PipeTransform {
  transform(items: any[], args: any[]): any {
    return items.filter(definitions => definitions.isHidden);
  }
}

在我的模板中，我只是过滤了集合（为简洁而省略）：

  <thead class="table-inverse">
    <tr>
      <th *ngFor="let item of (items.columnHeaders | filterHeaders)">
        <span>{{item.headerName}}</span>
      </th>
    </tr>
  </thead>

我的组件在ngOnInit上获取包含标题的数据：

export class TableComponent {
  items: any = [];

  constructor(private service: DataService) {
  }

  ngOnInit() {
    this.service.getData()
      .subscribe((data: any) => this.items = data);
  }
}

但是，当我加载页面时，items.filter会返回错误，因为items仍未定义。我在组件中应该做些什么来确保管道在运行时有项目吗？

Answer 1

您可以在桌面上放置一个ngIf，以确保它仅在定义项目时显示：

<thead class="table-inverse" *ngIf="items">
<tr>
  <th *ngFor="let item of (items.columnHeaders | filterHeaders)">
    <span>{{item.headerName}}</span>
  </th>
</tr>

在页面加载期间未定义Angular2管道项

1 个答案: