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

您需要创建pipe

<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;
    }
}

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

1 个答案: