Mat自动完成不过滤值

Question

我有一个产品列表，我希望在选择时具有自动完成功能，但这似乎无法按照我尝试的方式工作。在这方面的任何帮助将不胜感激。在此先感谢

这是我的html代码

form [formGroup]="loanProductForm">
<table style="overflow-x: auto;display: inline-block; white-space: nowrap;">
    <thead>
        <tr class='tableHeader'>
            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <td fxFlex="14" class="pr-4">Name</td>
                <td fxFlex="14" class="pr-4">Price</td>
                <td fxFlex="14" class="pr-4">Loan Term</td>
                <td fxFlex="14" class="pr-4">Quantity</td>
                <td fxFlex="14" class="pr-4">Deposit</td>
                <td fxFlex="14" class="pr-4">Total</td>
                <td fxFlex="14" class="pr-4">Action</td>
            </div>
        </tr>
    </thead>
    <tbody>
        <tr formArrayName="products" *ngFor="let product of loanProductForm.get('products').controls; let i = index">
            <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <td fxFlex="14">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Product </mat-label>

                        <input type="text" placeholder="Product" name="" formControlName="product" matInput
                            [matAutocomplete]="productauto">

                        <mat-autocomplete autoActiveFirstOption (selectionChange)="onChangedProduct($event, i)"
                            [id]="'product.productId' + i" #productauto="matAutocomplete" [displayWith]="displayFn">
                            <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
                                {{product.name}}
                            </mat-option>
                        </mat-autocomplete>

                        <!-- <mat-select formControlName="productId" (selectionChange)="onChangedProduct($event, i)" [id]="'productId' + i" required>
                                                        <mat-option *ngFor="let product of productList" [value]="product.productId">
                                                            {{product.name}}
                                                        </mat-option>
                                                    </mat-select> -->

                    </mat-form-field>
                </td>
                <td fxFlex="14">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Price </mat-label>
                        <input type='number' (keyup)="onPriceChange($event)" matInput formControlName="price"
                            [id]="'price' + i" name="" placeholder="Price" required>
                    </mat-form-field>
                </td>
                <td fxFlex="14">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Loan Term </mat-label>
                        <mat-select formControlName="loanTermId" [id]="'loanTermId' + i" required>
                            <mat-option *ngFor="let loanTerm of loanTermList" [value]="loanTerm.loanTermId">
                                {{loanTerm.numberOfMonths}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td fxFlex="14">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Quantity </mat-label>
                        <input type='number' min="1" formControlName="quantity" [id]="'quantity' + i" matInput name=""
                            id="" placeholder="Quantity" required>

                    </mat-form-field>
                </td>
                <td fxFlex="14">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Deposit </mat-label>
                        <input type='number' min="1" formControlName="deposit" [id]="'deposit' + i" matInput name=""
                            id="" placeholder="Deposit" required>
                    </mat-form-field>
                </td>
                <td fxFlex="14">
                    <div fxFlex="100" class="pr-4">
                        <mat-label>KES:&nbsp;&nbsp;</mat-label>
                        <input [disabled]="true" formControlName="total" [id]="'total' + i" matInput name="total"
                            class='total' id="" placeholder="Total" style="color:black; font-weight:bold; width: unset;"
                            required>
                    </div>
                </td>
                <td fxFlex="14">
                    <div fxFlex="100" class="pr-4">
                        <!-- <button class='deleteButton' mat-stroked-button style="color:red" > -->
                        <span class='deleteButton' (click)='deleteProduct(i)'>
                            <mat-icon>delete</mat-icon>
                        </span>
                        <!-- </button> -->
                    </div>
                </td>

            </div>
        </tr>
        <tr>
            <td fxFlex="10">
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <button type="button" mat-stroked-button class='addBtn btn-style-2' fxFlex='100'
                        (click)='addProductButtonClick()'>Add
                        <mat-icon>add_box</mat-icon>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</form>

这是组件的代码

filteredProducts: Observable<string[]>;
productList: any;

addProductFormGroup(): FormGroup {
    return this._formBuilder.group({
        productId: ['', Validators.required],
        product: [''],
        price: [0, Validators.required],
        loanTermId: ['', Validators.required],
        quantity: [0, Validators.required],
        deposit: [0, Validators.required],
        total: [0, Validators.required],
    });
}
ngOnInit() {
    this.getProducts();

    this.loanProductForm = this._formBuilder.group({
        products: this._formBuilder.array([
            this.addProductFormGroup()
        ]),
        product: ['']
    });
    this.loanProductForm.valueChanges.pipe(debounceTime(20)).subscribe((values) => {

        (this.loanProductForm.get('products') as FormArray).controls.forEach(group => {
            let total = (group.get('quantity').value * group.get('price').value) - group.get('deposit').value;
            group.get('total').setValue(total);
            // group.get('total').setValue(this.currencyPipe.transform(total, 'KES '));
        });

    }
getProducts() {
        this.productService.getProducts().subscribe((response) => {
            this.productList = response;
            this.productList.sort((a, b) => (a.productId < b.productId) ? 1 : -1);

            this.filteredProducts = this.loanProductForm.get('product').valueChanges.pipe(
                startWith(''),
                map(value => typeof value === 'string' ? value : value.name),
                map(value => this.productFilter(value))
            );
        });

    }
  private productFilter(product) {
        console.log('value: ', product);
        const filterValue = product.toLowerCase();
        return this.productList.filter(product => product.name.toLowerCase().indexOf(filterValue) === 0);
    }
    addProductButtonClick(): void {

        (<FormArray>this.loanProductForm.get('products')).push(this.addProductFormGroup());
    console.log('Loan Products: ', this.loanProductForm.value);

}

我已经输入了，但是没有过滤值下面是我的表单外观的图像

Answer 1

我最近亲自研究了自动完成功能（mat-autocomplete）。起初我遇到了同样的问题，但是几个小时后，我开始工作了。我会找到这个（the official example）。这对我有用！