Angular 2使用管道过滤复杂数据

时间:2017-02-02 12:01:07

标签: javascript angular typescript

我有一个像这样的复杂数据结构(一些标签包含IP表作为内容):

tabs : [
    { 
      data: [
        { ip: '', vms: [ { hostname: 'some'}, { hostname: 'some2'} ] },         
        { ip: '', vms: [....] }
      ],
      name: 'tab1',
    },
    {...}

]

现在我想过滤主机名字段。

我写了一段代码:

export class VMsTabFilterPipe implements PipeTransform {
transform(items: any[], filterValue: string): any {
    console.log(filterValue)
    if(filterValue == undefined || filterValue == '') {
        console.log(items)
        return items;
    }

    filterValue = filterValue.toLowerCase();

    return items.filter(item => {
        let found = false;



          item.data = item.data.filter(record => {
                for(let vm of record.vms) {
                    if(String(vm.hostname).toLowerCase().indexOf(filterValue) !== -1) {
                        found = true; 
                        return true;
                    }
                }
            });

            if(found) {
                return item;
            }
        });
    };
}

模板

<ngb-tab *ngFor="let tab of data | vmsTabFilter:filterValue; let i = index" [class.active]="tab.active" title="{{tab.name}}">
        <template ngbTabContent>
            <my-table [data]="prepareData(tab.data)" [defaultSort]="1"></my-table>
        </template>
    </ngb-tab>

它似乎正确地过滤了标签,但是没有过滤好IP表格中的行。我做错了什么?

0 个答案:

没有答案