[英]Angular template not updating on RxJS Observable change
I work on a web application that contains an input field as a search.我在一个 web 应用程序上工作,该应用程序包含一个输入字段作为搜索。 Its values are being given to a Subject that returns an Observable with an array of data.
它的值被提供给返回带有数据数组的 Observable 的 Subject。 This data is rendered in a template.
此数据在模板中呈现。 All of this works .
所有这些都有效。 What does not, is to hide the result-section of the template when there aren't any results.
没有的是,当没有任何结果时隐藏模板的结果部分。 Corresponding code sections:
对应的代码部分:
private querySubject = new Subject<string>();
...
public searchResult: Observable<XyzDTO[]> = this.querySubject.pipe(
debounceTime(250),
distinctUntilChanged(),
switchMap((queryText) => {
if (queryText.length > 2) {
return from([this.xyzService.search(queryText)]);
} else {
return from([]);
}
})
);
<ng-container *ngIf="searchResult | async as results">
Results: {{results.length}}
<mat-card *ngFor="let result of results" class="m-2" (click)="goToDetails(result.id)">
...
Having entered more than 2 characters makes the results appear as expected.输入超过 2 个字符会使结果按预期显示。 However, reducing the number of characters back to 2 or less doesn't change the view.
但是,将字符数减少回 2 或更少不会改变视图。 Debugging shows that
return from([]);
调试显示
return from([]);
is being called.正在被调用。 Any idea why the template doesn't update properly?
知道为什么模板不能正确更新吗? Thanks!
谢谢!
You have wrong return type with characters length <= 2. Use of
instead to from
.您的返回类型错误,字符长度 <= 2。使用
of
代替 to from
。
else {
return of([]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.