angular - 如何用管道保存 *ngFor 的模型操作？ - "#item of (result = (items | orderAsc))"在 A2 中不起作用

Question

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

我当前的 html:

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

保存结果的旧 angularJS 方式:

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

其中“result”可以在相应的 Controller 中使用。

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

Answer 1

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

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

您可以实现一个自定义管道(下例中的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

希望对你有帮助，蒂埃里