每个人都应该知道：

Question

我有简单的Angular 2应用程序，如下所示：

数据结构

class Item {
  name: string,
  status: boolean
}

模板

<ul *ngIf="items">
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

组件

export class ItemsComponent implement OnInit {

  items: Item[]

  constructor(private itemService: ItemService) { }

  ngOnInit() {
    this.getItems();
  }

  private getItems(): void {
    this.itemService.getItems().then(items => this.items = items);
  }

}

使用getItems() ItemService的异步数据接收器Promise。

此应用效果很好。完整项目列表显示在浏览器上。

我想只显示状态为true的项目。为此，我实施了一个简单的管道，以items：

过滤status

@Pipe({
  name: 'filterByStatus'
})
export class FilterByStatusPipe implements PipeTransform {

  transform(votes: Vote[], status: boolean): Vote[] {
    return votes.filter(vote => vote.status === status);
  }
}

我将模板中的li标记更新为

<li *ngFor="let item of items|filterByStatus:true">{{ item.name }}</li>

但是，此更新会使<ul *ngIf="items">为false，因此不会计算<li> s。（即items === undefined）

我不知道为什么第一个版本运行良好但更新版本没有。我如何通过items获取status === true？

感谢。

Answer 1

每个人都应该知道：

DON＆＃39; T 使用status作为您的媒体资源或变量的名称。它可能会在您的环境中使用。

请参阅：JS reserved keywords list

重命名解决了这个问题。

（Angular2）`* ngfor`不使用来自异步数据的管道来处理过滤器

1 个答案:

每个人都应该知道：