页面加载期间未定义的Angular2管道项目答案

【问题标题】：Angular2 pipe items undefined during page load页面加载期间未定义的Angular2管道项目
【发布时间】：2016-11-16 22:36:04
【问题描述】：

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

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 仍然未定义。我应该在我的组件中做些什么来确保管道在运行时有项目吗？

【问题讨论】：

标签： angular

【解决方案1】：

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

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

【讨论】：

刚刚试过。那根本不显示标题:(
最好把它放在桌面上（我对错误的代码示例不好）。如果您仅通过在模板中添加 {{items}} 来注销您的项目，那么在您的页面加载后是否会显示任何内容。
有趣的是，我确实把它放在了桌子上。标题不显示，但表中的项目与ngFor...