変更を加えるには、常にangular2の変数を宣言する必要がありますか？

Question

私は、次のコードを持っている：

これは、HTMLビューである：

<button type="button" (click)="filterIt('male')">Filter male gender</button> 
    <table> 
     <ng-container *ngFor="let item of array;let i=index"> 
     <tr class="border-bottom" *ngIf="item.condition==condition_var"> 
     <td>{{i+1}}</td> 
     <td>{{item.condition}}</td> 
     </tr> 
    </ng-container> 
</table> 

これはtypescriptファイル（.TS）です：

condition_var:string; 
    filterIt(value){ 
    this.condition_var=value; 
    } 

注：配列変数にはすでに値が設定されています。 （オブジェクトの配列： [{}]）：むしろ私を移入より良い方法、それは常に変数を宣言すると、式の中で彼らと一緒に作業するangular2で実践されており、ngIf、ngForなどまたは私は使用することができます

私の質問は見栄えの悪い変数が多すぎるクラス。

具体的には、このコードを書くためのよりよい方法がありますか？

Answer 1

はいこれを行うには、より良い（より慣用的な）方法があります：use a @Pipe。

import { Pipe, PipeTransform } from "@angular/core"; 

@Pipe({ name: 'filter' }) 
export class FilterPipe implements PipeTransform { 
    transform(values: any, condition: any): any { 
    return values.filter(item => item.condition === condition); 
    } 
} 

を実装します。

<ng-container *ngFor="let item of array | filter:condition"> 

そして、あなたが好きしかしconditionを設定します。フィルタでは、複数の位置パラメータをコロンで区切って指定できます。

import { FilterPipe } from 'pipes/fitler.pipe.ts'; 

@NgModule({ 
    declaractions: [ 
    FilterPipe 
    ], 
    // ... 
}) 

、問題の@NgModuleがレイジーロード「共有」モジュールであれば、再することを忘れないでください：

はどちら@NgModule sのあなたはパイプを使用するためのパイプを追加することを忘れないでくださいそれを-export：

@NgModule({ 
     declaractions: [ 
     FilterPipe 
     ], 
     exports: [ 
     FilterPipe 
     ], 
     // ... 
    }) 

この回答は角4.3.6のように現在有効です。

Answer 2

あなたの場合、「男性」の文字列に基づいてデータをフィルタリングしています。

ですから、直接、次のスニペットを使用することができます。

*ngIf="item.condition=='male'" 

が機能する必要はありませんブロック場合、それは、に処理する、

Answer 3

私はこのようにそれを解決するだろう：

//YOUR COMPONENT .TS CODE 
filterIt(parameter: String){ 
//filter this.array here using your parameter 
} 

//YOUR COMPONENT .HTML CODE 
<button type="button" (click)="filterIt('male')">Filter male gender</button> 
<table> 
    <ng-container *ngFor="let item of array;"> 
    <tr class="border-bottom"> 
    <td>{{i+1}}</td> 
    <td>{{item.condition}}</td> 
    </tr> 
</ng-container> 

これは非常にCLEですanerとあなたのウェブページが表示されている間、your.tsファイル内でロジックが起こるようにします。

Answer 4

あなたがループしている配列をフィルタリングするコンポーネントクラスの内部でゲッタを使用します。このように：

public myArray: any[] = []; 
public myCondition: string | null = null; 

public get myFilteredArray() { 
    return this.myArray.filter(item => item.condition === this.myCondition); 
} 

そして、あなたのテンプレートでちょうどfilteredArrayを使用します。

<table> 
    <tr class="border-bottom" *ngFor="let item of myFilteredArray;let i=index"> 
    <td>{{i+1}}</td> 
    <td>{{item.condition}}</td> 
    </tr> 
</table> 

それともあなたはそれのためのパイプを構築することができます：あなたがしたい場合はここで

@Pipe({ name: 'myFilterPipe' }) 
export class MyFilterPipe implements PipeTransform { 
    transform(value: any[], condition: string | null): any[] { 
    if(!Array.isArray(value)) return []; 
    return value.filter(item => item.condition === condition); 
    } 
} 

Answer 5

はアプローチですあなたのクラスの変数を宣言しないでください。ただ、ボタンのクリックに変数を初期化する：あなたはこの方法であなたのクラスでcondition、condition_varまたはfilterIt()メソッドを宣言する必要はありません

<button type="button" (click)="condition = 'male'">Filter male gender</button> 
<table> 
    <ng-container *ngFor="let item of array;let i=index"> 
     <tr class="border-bottom" *ngIf="item.condition == condition"> 
      <td>{{i+1}}</td> 
      <td>{{item.condition}}</td> 
     </tr> 
    </ng-container> 
</table> 

。 Plunker Demoへのリンク。