角度多搜索过滤

Question

我正在使用angular 2构建一个多搜索过滤器。我可以使用复选框基于多个过滤器进行过滤。根据选择的制造商，型号，颜色，滤镜可以完美地应用。

我正在遍历我的阵列汽车，以使用* ngFor =“ let filtersToDisplaylet filter”来绘制我的过滤器，但我不想遍历正在选择的一组过滤器，因此我可以从中应用更多过滤器同一组，即制造商？

这是我的示例： https://stackblitz.com/edit/angular-tenpga?file=src%2Fapp%2Fapp.component.ts

我使用ng-for指令构建过滤器，如下所示：

<div style="padding:5px;" *ngFor="let filters of filtersToDisplay">
<input id="chkManufacturer" name="manufacturer" value=" 
{{filters.manufacturer}}" (change)="change($event)" type="checkbox" /> 
{{filters.manufacturer}}
</div>

<br />
<div style="padding:5px;" *ngFor="let filters of filtersToDisplay">
<input id="chkModel" name="model" (change)="change($event)" value=" 
{{filters.model}}" type="checkbox" />{{filters.model}}
</div>

<br />
<div style="padding:5px;" *ngFor="let filters of filtersToDisplay">
<input id="chkColour" name="colour" (change)="change($event)" value=" 
{{filters.colour}}" type="checkbox" />{{filters.colour}}
</div>

<table>
<thead>
    <tr>
        <th>Manufacturer</th>
        <th>Model</th>
        <th>Range</th>
        <th>Price</th>
        <th>Fuel</th>
        <th>Year</th>
        <th>Transmisson</th>
    </tr>
</thead>
<tbody>
    <ng-container *ngFor="let car of carsToDisplay">
        <tr>
            <td>{{car.manufacturer}}</td>
            <td>{{car.model}}</td>
            <td>{{car.range}}</td>
            <td>{{car.price | currency:'GBP':true:'1.3-3'}}</td>
            <td>{{car.fuel}}</td>
            <td>{{car.year}}</td>
            <td>{{car.transmisson}}</td>
        </tr>
    </ng-container>
    <tr *ngIf="!cars || cars.length==0">
        <td colspan="7">No cars to display</td>
    </tr>
</tbody>
</table>

这是我的一系列汽车，并在选中复选框时发生更改

这是TS文件：

selectedValue = [];
filterArr = [];

    cars = [
        { code: 'car101', manufacturer: 'BMW', model: '3 Series', range: '320d M sport', price: 20000, fuel: 'Diesel', year: 2018, transmisson: 'Manual', colour: 'White'},
        { code: 'car102', manufacturer: 'Honda', model: 'Civic', range: 'Type R', price: 30000, fuel: 'Petrol', year: 2017, transmisson: 'Automatic', colour: 'Black'},
        { code: 'car103', manufacturer: 'Mercedes', model: 'A Class', range: 'AMG SPort', price: 50000, fuel: 'Petrol', year: 2018, transmisson: 'Automatic', colour: 'Red'},
        { code: 'car104', manufacturer: 'Audi', model: 'A3', range: 'TFSI Quattro S Line', price: 20000, fuel: 'Diesel', year: 2018, transmisson: 'Automatic', colour: 'Grey'},
        { code: 'car105', manufacturer: 'Ford', model: 'Focus', range: 'ST', price: 50000, fuel: 'Petrol', year: 2016, transmisson: 'Automatic', colour: 'Black'},
    ]

carsToDisplay = this.cars;

filtersToDisplay = this.cars;

change(e) {
    if (e.target.checked) {
        if (!this.filterArr.hasOwnProperty(e.srcElement.name))
            this.filterArr[e.srcElement.name] = [e.target.value];
        else
            this.filterArr[e.srcElement.name].push(e.target.value);

        this.carsToDisplay = multiFilter(this.cars, this.filterArr);

        this.filtersToDisplay = Filter(this.cars, this.filterArr);

    }
    else
    {
        if (this.filterArr[e.srcElement.name]) {
            let index = 
   this.filterArr[e.srcElement.name].indexOf(e.target.value)
            this.filterArr[e.srcElement.name].splice(index, 1)
        }

        removeEmptyObjects(this.filterArr);

        this.carsToDisplay = multiFilter(this.cars, this.filterArr);

        this.filtersToDisplay = Filter(this.cars, this.filterArr);
    }

    function removeEmptyObjects(obj) {
        for (var propName in obj) {
            if (obj[propName] === null || obj[propName] === undefined || 
   obj[propName].length == 0) {
                delete obj[propName];
            }
        }
    }

    function multiFilter(array, filters) {
        if (Object.keys(filters))
        return array.filter(o => 
            Object.keys(filters).every(k =>
                [].concat(filters[k]).some(v => o[k].includes(v))));
    }

    function Filter(array, filters) {
        console.log(Object.keys(filters));
        if (Object.keys(filters))
            return array.filter(o =>
                Object.keys(filters).every(k =>
                    [].concat(filters[k]).some(v => o[k].includes(v))));
    }

}

希望这有意义吗？我对angular非常陌生，因此希望能找到解决此问题的最佳方法。