web-dev-qa-db-ja.com

angular2のフィルター（パイプ）セットのサイズを取得する方法

Angle2で消えたため、独自のフィルターパイプを作成しました。

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
  name: 'myFilter'
})
export class MyFilter implements PipeTransform {
  transform(customerData: Array<Object>, args: any[]) {
    if (customerData == undefined) {
      return;
    }
    var re = new RegExp(args[0]);
    return customerData.filter((item) => re.test(item.customerId));
  }
}

それを私のテンプレートで使用します：

<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm">
  ...
</tr>

ここで、パイプが返す一致の数を確認します。本質的に、返される配列のサイズ。

angular 1.xでは、返されたセットを次のようにテンプレートの変数に割り当てることができました。

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

ただし、angular2のテンプレートで変数を割り当てることはできなくなりました。

では、フィルターを2回呼び出すことなく、フィルター処理されたセットのサイズを取得するにはどうすればよいですか？

filtertypescriptpipeangular
23
neric

オリジナル

知る限りでは、現在これを直接行う方法はありません。ハックは、テンプレート変数をコンテンツに追加し、ViewChildren(...)クエリを使用して作成されたアイテムを取得し、それらをカウントすることです。

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar>
  ...
</tr>
<div>count: {{filteredItems?.length}}</div>

@ViewChildren('someVar') filteredItems;

代替アプローチは、 https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview に示すように、カウンター変数への参照をパイプに渡すことです。

update（Angular> = 4.0.0）

Angular 4*ngForはasをサポートします

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result">

テンプレートで使用できる（*ngForは次のように追加されます

  <div>{{result?.length}}</div>
22
Günter Zöchbauer

フィルターをもう一度呼び出す必要がありますが、次のように直接使用できます。

{{ (customerData | myFilter:searchTerm)?.length }}
21
A. Morel

あなたがサイズで何をしたいのか正確に知りません、そしてギュンターのソリューションはあなたのニーズに合うことができます。

つまり、コンポーネントインスタンスをパイプに挿入し、このコンポーネントのプロパティに長さを直接設定できます。

@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.filteredItemLength = array.length;

    return array;
  }
}

@Component({
  (...)
})
export class AppComponent {
  (...)
}

この回答を参照してください：

お役に立てばと思います、ティエリー

4
Thierry Templier

Gunterの答えは正しい方向にあり、* ngForループから結果を使用する方法に関する情報だけが欠けています。考えられる解決策の1つは、次のように* ngForをより広いディレクティブで囲むことです。

<ng-directive *ngIf='customerData | myFilter:searchTerm as filteredItems'>
   <tr *ngFor="let singleCustomerData of filteredItems">
   ...
   </tr>
   <div>count: {{filteredItems.length}}</div>
</ng-directive>

このヒントの功績は次の投稿にあります。

https://netbasal.com/using-pipe-results-in-angular-templates-430683fa221

3
sertal70

クラスコンポーネントからHTMLパイプに2番目の引数としてオブジェクトを渡すだけです。そして、クラスのパイプで結果の配列を渡します。

0
ktretyak