3

所以我用 *ngFor 填充了一个表，并使用管道来过滤和排序给定的 items 数组。这完美地工作并且表行按预期创建。但我也不想在托管表格的组件中使用管道的结果。angular2如何实现这一点？

我当前的html：

<tr *ngFor="#item of items | orderAsc">{{item.name}}</tr>

保存结果的旧 angularJS 方式：

<tr *ngFor="#item of (result = (items | orderAsc))">{{item.name}}</tr>

其中“结果”可以在相应的控制器中使用。

实现这一目标的 angular2 方式是什么？我想将过滤保留在 html 模板中，而不是将其移动到组件中。

4

2 回答 2

2

据我所知，不支持旧方式。

我有一个解决方法，但我不知道这是否是一种干净的方法;-)

您可以实现一个自定义管道（dump以下示例中的那个）放在管道链的末尾，以将过滤后的值保存到组件中

@Pipe({
  name: 'filter'
})
export class FilterPipe {
  (...)
}

@Pipe({
  name: 'sort'
})
export class FilterPipe {
  (...)
}

@Pipe({
  name: 'dump'
})
export class DumpPipe {
  constructor(@Inject(forwardRef(() => AppComponent)) app:AppComponent) {
    this.app = app;
  }

  transform(array: Array<string>, args: string): Array<string> {
    this.app.save(array);
    return array;
  }
}

@Component({
  selector: 'my-app', 
  template: `
    <div>
      <span *ngFor="#l of (list | filter | sort)">{{l}}</span>
    </div>
  `,
  pipes: [ FilterPipe, SortPipe, DumpFilter ]
})
export class AppComponent {
  constructor() {
    this.list = [ 'n', 'g', 'a', 'u', 'r', 'l' ];
  }

  save(array) {
    console.log('save array = '+array);
  }
}

计算表达式时，dump管道使用过滤和排序的值调用save组件的方法。

这是相应的 plunkr：https ://plnkr.co/edit/xv4BTq7aCyKJSKcA9qB9?p=preview

希望它可以帮助你，蒂埃里

于 2016-01-27T13:44:13.657 回答
0

根据官方文档应该是：

<tr *ngFor="let item of items | orderAsc as result">{{item.name}} ( {{result.length}} )</tr>
于 2018-05-15T09:24:40.530 回答