过滤下拉数据-Angular 6

Question

I want Angular app to filter data from the dropdown, list of products are associated with the product number. Below is the JSON structure.

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";
}

I have an input box (to search by product). when I type product number it must list only products under product number.

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

Initially, when there is no searchTerm entered, it will be undefined so the filter will not return any data . Add a condition to return all data if there is no searchTerm . As mentioned by @AJT82 in the comments, this logic should also be placed in the component.

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

Note : For formControl , use valueChanges to achieve the same

Then call this function on change of the input

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

And use filteredProducts in your template

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