2

簡単に使いやすくするために、チェックボックスをフィルターとして追加したいと思います。ただし、ページを更新したときにのみ読み込まれます。

これらは私のファイルです：

ファイル名.コンポーネント.ts

import { Component } from '@angular/core';
import { CheckboxFilterPipe } from './checkbox-filter.pipe';

@Component({
    templateUrl: 'app/filename.component.html',
    pipes: [CheckboxFilterPipe]
})

export class filenameComponent {
    checkboxes: any[] = [{
        id: 1,
        label: 'Filter 1',
        state: true
    }, {
        id: 2,
        label: 'Filter 2',
        state: true
    }];

    displayData: any[] = [
        // Objects I want to display
    ];
}

チェックボックス-filter.pipe.ts

import { Pipe, Pipetransform } from '@angular/core';

@Pipe({
    name: 'CheckboxFilter'
})

export class CheckboxFilterPipe implements PipeTransform {
    transform(values: any[], args: string[]): boolean {
        console.log(args);
        return values.filter(value=> {
            // My filtercode, return true for now
            return true;
        });
    }
}

ファイル名.component.html

<div class="content-wrapper">
    <div class="row">
        <label *ngFor="let cb of checkboxes">
            <input type="checkbox" [(ngModel)]="cb.state"> {{cb.label}}
        </label>
    </div>
</div>
<table>
    <tr *ngFor="let value of displayData | CheckboxFilter:checkboxes">
        <td>{{ value.value1 }}</td>
        <td>{{ value.value2 }}</td>
        <td>{{ value.value2 }}</td>
    </tr>
</table>

私はAngular2.rc.0を使用しています。わかりやすくするために、この質問の変数の名前を変更しました。コンソールの出力は、チェックボックスをオン (オフ) にしたときではなく、ページを更新したときにのみ発生します。この問題を解決するための助けをいただければ幸いです。

4

1 に答える 1