Question

我正在使用mat-autocomplete，并且我想在没有任何点击的情况下选择元素后取消聚焦输入。 mat-focused mat-form-field类mat-auto-complete会将焦点放在mat-form-field上，将其从mat-focused中删除，但setTimeout类需要一些时间来设置我需要等到它被设置为我可以删除它，我使用setTimeOut解决了它，但我认为它不正确。如何将其更改为异步或从材料获取异步函数，承诺，可观察或...而不使用export class AutocompleteSimpleExample { myControl: FormControl = new FormControl(); public matForm ; constructor(){ } ngOnInit(){ this.matForm = document.getElementById("matForm") } options = [ 'One', 'Two', 'Three' ]; test(option){ console.log(option) setTimeout(function(){ this.matForm.classList.remove('mat-focused' )}, 100); } }？

组件：

<form class="example-form">
  <mat-form-field class="example-full-width test" #matForm id="matForm">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" #textInput>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="test($event.option)">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

HTML：

updates.updateOne

我做了stackblitz。

Answer 1

不要自己更改CSS类。这不是Angular的工作方式。

相反，依赖于框架本身：在其上创建一个视图子元素和blur，如this stackblitz所示：

@ViewChild('textInput') textInput: ElementRef;  
test(option) {
  console.log(option.value)
  setTimeout(() => {
    this.textInput.nativeElement.blur();
  });
}

获取材质元素classList observable

1 个答案: