时间戳

首页 > 解决方案 > 当垫子步进器更改编程时垫子自动完成不会关闭

angular - 当垫子步进器更改编程时垫子自动完成不会关闭

问题描述

我有一个垫子自动完成功能，它会触发一个功能optionSelected()

<mat-form-field fxLayout="column">
    <input  matInput
            [matAutocomplete]="auto"
            #trigger="matAutocompleteTrigger"
            formControlName="shop">
    <mat-autocomplete   #auto="matAutocomplete"
                        [displayWith]="displayFn" 
                        (optionSelected)="selectedShop($event, stepper)">
                        <mat-option>...</mat-option>
                        </mat-autocomplete>
</mat-form-field>

上面的表单在mat-stepper组件内部。在optionSelected我有以下功能

selectedShop(event, stepper) {

    const shopData = event.option.value as Shop;

    if(shopData) {
      this.registerForm.patchValue({ secondaryMobile: shopData.secondaryMobile });
      stepper.next();
    }
}

当有人选择自动完成时，它将设置反应表单的值并移至下一步。它工作正常，但自动完成下拉面板仍然保持在顶部。

我累了

@ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;

if(shopData) {
      this.registerForm.patchValue({ secondaryMobile: shopData.secondaryMobile });
      stepper.next();
      this.autocompleteTrigger.closePanel();
}

也在里面试过，ngAfterViewInit()但失败了。面板永远不会关闭。我正在使用角度版本 10。

请帮忙。

标签： angularangular-materialmat-autocomplete

解决方案

推荐阅读