Фильтр в выпадающих данных -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.Добавьте условие, чтобы вернуть все 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 из input

<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>