相关疑难解决方法(0)

我在尝试使用Angular *ngFor和*ngIf同一个元素时遇到了问题.

当尝试遍历集合中的集合时*ngFor,集合被视为null并因此在尝试访问模板中的属性时失败.

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

    <div *ngIf="show" *ngFor="let thing of stuff">
      {{log(thing)}}
      <span>{{thing.name}}</span>
    </div>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { …

显然,Angular 2将使用管道而不是Angular1中的过滤器以及ng-for来过滤结果,尽管实现似乎仍然模糊,没有明确的文档.

也就是说,我想要实现的目标可以从以下角度来看待

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

如何使用管道实现？