如何在 Angular2 中过滤 [ngForOf] 中的值?

How to filter the values inside [ngForOf] in Angular2?

pipe in angular2 ngForOf我是 Angular 的新手。现在我正在学习 ngForOf 概念。我正在尝试研究如何在 ngForOf 指令中绑定变量。请找到以下 codes.In AngularJS 我们可以直接绑定 ng-repeat 中的值但是我可以在 Angular2 中做什么?

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>{{title}}</h1>


  <ng-template ngFor let-item [ngForOf]="heroes" let-i="index">
    <li>{{item}}</li>
  </ng-template>
`
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

}

在上面的代码中,我成功地显示了 heroes 数组的内容。

现在,我想在英雄上应用管道,并根据管道过滤数据,然后显示过滤后的数据。

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>{{title}}</h1>


  <ng-template ngFor let-item [ngForOf]="filteredData = (heroes | pipename : "data for pipe" " let-i="index">
    <li>{{item}}</li>
  </ng-template>
`
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

}

期待任何形式的帮助。

谢谢

我之前在另一个问题上已经回答了几乎相同的问题,这可能会对你有所帮助。如果没有,请随时发表评论,我会提供帮助。

简而言之:不要为此使用管道。传递数据时在组件中过滤和排序。