如果输入setValue,则不显示角垫自动完成功能

时间:2020-03-29 11:15:28

标签: angular angular-material angular-forms mat-autocomplete

当我单击输入元素时,将显示自动完成选项。但是,当我动态更改输入元素的值时,自动填充选项不会显示。

q = qp.parse(u"date:2005062401, name:tom")      

动态更改输入值时如何显示自动完成功能?

1 个答案:

答案 0 :(得分:1)

我假设您想在设置该值后立即显示该面板。

HTML : 也使用模板参考进行输入

<mat-form-field>
    <input type="text"
        [formControl]="dialTextControl"
       #autoCompleteInput  [matAutocomplete]="auto" >
    <mat-autocomplete #auto="matAutocomplete">
        <mat-optgroup *ngFor="let group of dialerUsersGroup" [label]="group.type">
            <mat-option *ngFor="let user of group.users" [value]="user.number">
              {{user.name}}
            </mat-option>
        </mat-optgroup>
    </mat-autocomplete>
</mat-form-field>

和ts

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

setCustomValue() {
    this.dialTextControl.setValue('something'); // this does not make the autocomplete appear
    this.autocomplete.openPanel();
}

Stackblitz:https://stackblitz.com/edit/angular-o2itzp