获取材料元素类列表可观察

Question

我正在使用mat-autocomplete，我想在选择元素后取消焦点输入而无需任何单击。mat-form-field的mat-focused类导致对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);
}
}

.HTML：

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

我做了一个堆叠闪电战。

Answer 1

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

相反，依靠框架本身：创建一个视图子元素并在其上blur，如以下堆栈闪电图所示：

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