3

したがって、テーブルに *ngFor を入力し、パイプを使用して、指定された項目配列をフィルター処理および順序付けします。これは完全に機能し、テーブルの行は期待どおりに作成されます。しかし、テーブルをホストしているコンポーネントでパイプの結果を使用したくありません。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 に答える