[英]Mat-autocomplete is showing the previous date received from the server but not the latest. How can I fix it to show the latest data received?
ngOnInit(): void {
this.filteredAccountOptions = this.accountControl.valueChanges
.pipe(
startWith(''),
map(value => this.accountFilter(value))
);
.
.
.
实际上,“return this.createDialogService.accountOptions”语句是在“accountSearch(value)”方法中的上一行完成订阅部分之前执行的。 这就是为什么显示之前的数据。
private accountFilter(value: string): string[] {
this.accountSearch(value);
return this.createDialogService.accountOptions
}
accountSearch(searchedValue: string) {
this.createDialogService.searchAccount(searchedValue).subscribe(
(success) => {
this.createDialogService.accountOptions = JSON.parse(success.message)
},
(error) => {}
)
}
我的 HTML
<input type="text" matInput [formControl]="accountControl" [matAutocomplete]="auto1">
<mat-autocomplete #auto1="matAutocomplete">
<mat-option *ngFor="let option of filteredAccountOptions | async" [value]="option.Name">
{{option.Name}}
</mat-option>
</mat-autocomplete>
因为您在返回 Observable 后更改数据,所以使用swithMap
运算符。 为避免服务器超载,请使用debounceTime
。
ngOnInit(): void {
this.filteredAccountOptions = this.accountControl.valueChanges.pipe(
startWith(''),
debounceTime(3000),
switchMap(value => this._accountFilter(value)),
);
}
private _accountSearch(searchedValue: string): Observable<any> {
return this.createDialogService.searchAccount(searchedValue).pipe(
map(success => JSON.parse(success.message)),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.