角度2のチェックボックスフィルタ

Question

テーブルにオブジェクト（タスク）の配列があり、「夜」、「日」の2つのチェックボックスがあります。

次のシナリオが必要です：チェックボックスが選択されている場合は、プロパティが「夜間」のタスクのみがテーブルに残ります。チェックボックスの日付がチェックされている場合、プロパティ "Day"を持つタスクだけがテーブルに残されます（チェックボックス "夜"がチェックされている場合は、 "夜"タスクも残されます）。 3番目のチェックボックス「リセット」はフィルタをリセットします。

パイプなどのソートに別の方法を使用する方がいいでしょうか？

ここにはPlunkrです。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input type="checkbox" (click)="getNight()">Night 
    <input type="checkbox" (click)="getDay()">Day 
    <input type="checkbox">Uncheck 
    <br><br> 
    <table> 
     <tr *ngFor="let task of tasks"> 
     <td>{{task.chkBoxImageUrl}}</td> 
     <td>{{task.id}}</td> 
     <td>{{task.val}}</td> 
     </tr> 
    </table> 
    `, 
}) 
export class App { 
    tasks: Array<{chkBoxImageUrl: string, id: string, val: string, 
checked:boolean}> = [ 
    {chkBoxImageUrl: "http1", id: "item1", val: "Night", checked: false}, 
    {chkBoxImageUrl: "http2", id: "item2", val: "Day", checked: false}, 
    {chkBoxImageUrl: "http3", id: "item3", val: "Night", checked: false}, 
    {chkBoxImageUrl: "http4", id: "item4", val: "Day", checked: false}, 
    {chkBoxImageUrl: "http4", id: "item4", val: "Morning", checked: false}, 
    {chkBoxImageUrl: "http4", id: "item4", val: "Evening", checked: false} 
    ]; 

    getNight() { 
    console.log(this.tasks[2].val); // Night 
    // return this.tasks.filter(obj => obj.checked).map(obj => obj.val); 
    if(this.tasks.val == 'Night') { 
    return this.tasks.filter(obj => obj.checked).map(obj => obj.val == 'Night'); 
    } else { 
    console.log('666666'); 
    } 
    }; 
    getDay() { 
    return this.tasks.filter(obj => obj.checked).map(obj => obj.val); 
    }; 
    getCheckedCount(){ 
    return this.getCheckedValues().length; 
    } 
} 

Answer 1

それはかなりではない...しかし、私はここにあなたのplunkerを更新するのでまあ、それはいくつかのリファクタリングを使用できます：https://plnkr.co/edit/PaHGSZW69Wl8tC1o2wEo?p=preview は、ここでは、コードです。私のコードを整理するためにもう少し作業をしたいかもしれません。

私は、このようにHTMLを変更：

<input type="checkbox" (click) = "filterTasks('Night')">Night 
<input type="checkbox" (click) = "filterTasks('Day')">Day 

だから、それは、単一のメソッドの代わりに、二つの異なるものを呼び出します。

filterTask方法は、その後、次のようになります。

filterTasks(value: string) { 
    if (value === 'Night') { this.nightChecked = !this.nightChecked } 
    if (value === 'Day') { this.dayChecked = !this.dayChecked } 
    this.filteredTasks = this.tasks.filter(obj => 
       (this.nightChecked && obj.val === "Night") || 
       (this.dayChecked && obj.val === "Day")); 
    } 

これは、代わりに（クリック）イベントを使用しての2つのプロパティを設定する（[（ngModel）]データバインディングを使用してより良い仕事かもしれません（そして、私は参照してください。それは、他の答えは何をしたかである。）

Answer 2

がNightとDayチェックボックスの値にアクセスする必要がtasks配列をフィルタリングするためにここに

をplunkrを更新しました。ワンこれを行うには、インスタンス変数nightとdayを作成し、ngModelディレクティブを使用してそれぞれのチェックボックスにバインドします。

コンポーネント：

night: boolean = false; 
day: boolean = false; 

表示：チェックしたときにチェックされないとき偽

<input type="checkbox" [(ngModel)]="night">Night 
<input type="checkbox" [(ngModel)]="day">Day 

nightとdayは現在、trueになります。これらの値は、配列tasksのフィルタリングに使用できます。

コンポーネント：

interface Task { 
    chkBoxImageUrl: string; 
    id: string; 
    val: string; 
    checked:boolean; 
} 

getTasks(): Array<Task> { 
    return this.tasks.filter(obj => this.night && obj.val === 'Night' || this.day && obj.val === 'Day'); 
} 

ビュー：

<tr *ngFor="let task of getTasks()"> 

getTasks（）メソッドは、nightとdayの値に条件付きろ過タスクの配列を返します。これはビューにバインドされます。

チェックボックスをオフにすると、チェックボックスをオフにすると、nightとdayの値をfalseにリセットできます。

コンポーネント：

uncheck() { 
    this.night = false; 
    this.day = false; 
} 

ビュー：クリックで

<input type="checkbox" (click)="uncheck()">Uncheck 

、他のチェックボックスがgetTasks()