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。如果没有data，则添加条件以返回所有searchTerm。正如@ 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来实现相同的目的

然后在change的{{1}}上调用此函数

input

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

filteredProducts

过滤下拉数据-角度6

1 个答案: