Question

在角度1中，我有一个树列表，我可以通过搜索文本框在任何级别进行过滤。这是一个带有工作演示的fiddle。

我正在尝试将其转换为角度2，其结果如提供的图片所示。

我坚持将这行代码转换为角度2：

lvl_2.children = $filter('filter')(lvl_2.children, newVal);

这是我目前进展的Plunker。

Answer 1

<强> menu.components.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { FilterArrayPipe } from '../shared/pipes/filter.pipe';
@Component({
    selector: 'appc--menu',
    templateUrl: './menu.component.html',
    providers: [FilterArrayPipe]
})
export class MenuComponent implements OnInit {
    constructor(private pipe: FilterArrayPipe) { }
    ngOnInit() {
}

// todo: get data from a service
data: any = [{
    "name": "Trade",
    "children": [{
        "name": "May 2013",
        "children": [{
            "name": "2013-05-12 Project X",
            "children": []
        }]
    }, {
            "name": "October 2013",
            "children": [{
                "name": "2013-10-12 Visualization project",
                "children": []
            }]
        }, {
            "name": "September 2013",
            "children": [{
                "name": "2013-09-12 Angular project",
                "children": []
            }]
        }]
}, {
        "name": "Logistics",
        "children": [{
            "name": "April 2014",
            "children": [{
                "name": "2014-04-14 Party fun project",
                "children": []
            }]
        }, {
                "name": "November 2014",
                "children": [{
                    "name": "2014-11-01 Random project",
                    "children": []
                }, {
                        "name": "2014-11-03 Arbitrary project",
                        "children": []
                    }, {
                        "name": "2014-11-14 Fun project",
                        "children": []
                    }]
            }, {
                "name": "October 2014",
                "children": [{
                    "name": "2014-10-01 Another fun project",
                    "children": []
                }, {
                        "name": "2014-10-03 Typing excercise",
                        "children": []
                    }, {
                        "name": "2014-10-05 No project",
                        "children": []
                    }, {
                        "name": "2014-10-07 Well paid project",
                        "children": []
                    }, {
                        "name": "2014-10-08 Even more awesome project",
                        "children": []
                    }]
            }, {
                "name": "September 2014",
                "children": [{
                    "name": "2014-09-14 Last project",
                    "children": []
                }]
            }]
    }];

    filteredData: any = (this.data);
    updateFilteredData = (newVal: string) => {
        alert(newVal);
        var filtered = (this.data);
        filtered = filtered.map((lvl_1) => {
            lvl_1.children = lvl_1.children.map((lvl_2) => {
                lvl_2.children = this.pipe.transform(lvl_2.children, newVal);
                return lvl_2;
            });
            return lvl_1;
        });
        this.filteredData = filtered.filter((lvl_1) => {
            lvl_1.children = lvl_1.children.filter((lvl_2) => {
                return lvl_2.children.length > 0;
            });
            return lvl_1.children.length > 0;
        });
    }
}

<强> filter.pipe.ts

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

@Pipe({
    name: 'filter'
})
export class FilterArrayPipe {
    transform(value, args) {

    if (value && args && args != '') {
        if (!args[0]) {
            return value;
        } else if (value) {
            return value.filter(item => {
                for (let key in item) {
                    if ((typeof item[key] === 'string' || item[key] instanceof String) &&
                        (item[key].toUpperCase().indexOf(args.toUpperCase()) !== -1)) {
                        return true;
                    }
                    else if ((typeof item[key] === 'number' || item[key] instanceof Number) &&
                        (item[key].toString().indexOf(args) !== -1)) {
                        return true;
                    }
                }
            });
        }
    }
    return value;
}
}

<强> menu.component.html

<div>
    Welcome to the menu component!

    <input type="search" #query (keyup)="updateFilteredData(query.value)" placeholder="Search..." />
    <ul *ngFor="let lvl1 of filteredData  ">
        <li>
            <h1>{{lvl1.name}}</h1>
            <ul *ngFor="let lvl2 of lvl1.children  ">
                <li>
                    <h3>{{lvl2.name}}</h3>
                    <ul *ngFor="let lvl3 of lvl2.children ">
                        <li>
                            <p>{{lvl3.name}}</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

如何过滤角度2中的父/子列表

1 个答案: