在单击复选框的基础上使用角度过滤表中的数据

Question

<div style="height:30px;width:60px;float:left"><input type="checkbox" ng-model="A" />&nbsp;&nbsp;A</div>
<div style="height:30px;width:60px;float: left"><input type="checkbox" ng-model="B" />&nbsp;&nbsp;B</div>
<div style="height:30px;width:60px;float:left"><input type="checkbox"  ng-model="C" />&nbsp;&nbsp;C</div>

我希望当复选框 A 单击第 1 列中值为 A 的数据时，仅显示在表中，如果复选框 B 也被单击，则值 A 和 B 都显示在表中

<tr *ngFor="let sample of oilsamples">
    <td class="{{sample.evalcode | lowercase}}-bg eval">{{sample.evalcode | uppercase}}</td>
    <td>{{sample.sampledate  | date:'dd/MM/yyyy'}}</td>
    <td>{{sample.cust_name}}:{{sample.custid}}</td>
    <td>{{sample.site_name}}</td>
    <td>{{sample.serialno}}</td>
    <td>{{sample.unitno}}</td>
    <td>{{sample.modeldesc}}</td>
    <td>{{sample.compart}}</td>
    <td>{{sample.labno}}</td>
</tr>

如何使用过滤器？

Answer 1

你需要创建管道

<tr *ngFor="let sample of oilsamples| filterdPipe:a:b:c">
    <td class="{{sample.evalcode | lowercase}}-bg eval">{{sample.evalcode | uppercase}}</td>
    <td>{{sample.sampledate  | date:'dd/MM/yyyy'}}</td>
    <td>{{sample.cust_name}}:{{sample.custid}}</td>
    <td>{{sample.site_name}}</td>
    <td>{{sample.serialno}}</td>
    <td>{{sample.unitno}}</td>
    <td>{{sample.modeldesc}}</td>
    <td>{{sample.compart}}</td>
    <td>{{sample.labno}}</td>
</tr>

管道应该像

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
    name: 'filterPipe' // name here
})
export class FilterPipe implements PipeTransform {
    transform(value: [], a: string, b: string, c: string): any {
        let result =[];
       // code here 
        return result;
    }
}