过滤下拉数据-Angular 6

Question

我希望 Angular 应用程序从下拉列表中过滤数据，产品列表与产品编号相关联。下面是 JSON 结构。

component.ts

productlistArray = [{
    number: "1",
    productlist: [
        { name: "product_1_0" },
        { name: "product_1_1" }
    ]
}, {
    number: "2",
    productlist: [
        { name: "product_2_0" },
        { name: "product_2_1" }
    ]
}];

onclickx() {
    this.consoleMessages += "called this function";
}

我有一个输入框（按产品搜索）。当我输入产品编号时，它必须仅列出产品编号下的产品。

component.html

<td>  
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search By Product No" style="width:300px" [(ngModel)]="searchTerm"/>
    </div>

    <div class="form-group">
        <mat-select (selectionChange)="onclickx($event.value)">
            <mat-option *ngFor="let product of productlistArray" [value]="product.number">
                {{product.productlist}}
            </mat-option>
        </mat-select>
    </div> 
</td>

pipe.ts

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

@Pipe({
    name:"ProductFilter",
    pure:true
})
export class ProductFilter implements PipeTransform {
    transform(data: any[], searchTerm: string): any[] {
        return data.filter(productlistArray =>(productlistArray.number == searchTerm));
    }
}

Answer 1

最初，当没有输入searchTerm 时，它将是undefined，因此过滤器不会返回任何data。如果没有searchTerm，则添加条件以返回所有data。正如cmets中@AJT82所提到的，这个逻辑也应该放在组件中。

filteredProducts: any; // You should ideally create an interface instead
searchTerm: string;

filter() {
    this.filteredProducts = this.searchTerm ? this.productlistArray.filter(productlistArray => productlistArray.number == this.searchTerm) : this.productlistArray;
}

注意：对于formControl，使用valueChanges实现同样的效果

然后在input的change上调用这个函数

<input type="text" class="form-control" [(ngModel)]="searchTerm" (change)="filter()" placeholder="Search By Product No" style="width: 300px;" />

在你的模板中使用filteredProducts

<mat-form-field>
    <mat-select placeholder="Product" (selectionChange)="onclickx($event.value)">
        <mat-option *ngFor="let product of filteredProducts" [value]="product.number">
            {{product.productlist}}
        </mat-option>
    </mat-select>
</mat-form-field>