检查Observable是否为空是不可能的，所以我还有什么其他选择?

Question

我写了一个angular 11，我对Observables和Subjects很陌生。

我有一个mat-autocomplete组件，它的结果被划分为类别。最后一个类别是文章类别，我使用以下代码来显示它:

组件代码:

private readonly searchResultArticles = new Subject<Article[]>(); 
get searchResultArticles$(): Observable<Article[]> {
return this.searchResultArticles;
}

模板:

<mat-optgroup label="Articles">
<mat-option *ngFor="let article of searchResultArticles$ | async" [value]="article">
<img class="example-option-img" aria-hidden [src]="getArticleThumbnail(article.profile_dir,article.title)" height="25" />
<span class="cocktail_name_search_result" *ngIf="article.title" [innerHTML]="article.title | highlight : autoCompleteInput.value : 1"></span>
&nbsp;-&nbsp;
<span class="cocktail_desc_search_result" *ngIf="article.desc" [innerHTML]="article.desc | highlight : autoCompleteInput.value : 1"></span>
</mat-option>
</mat-optgroup>

因此，即使searchResultARticles$Observable中没有项目，也会显示标签为Articles的mat-optgroup。我想能够隐藏这个mat-optgroup，如果没有项目。

我想做:

<mat-optgroup label="Articles" *ngIf="(searchResultArticles$ | async).length>0">

，但这会导致一些奇怪的行为，项目有时不显示，我想我可以使用异步只有一次?我想我需要多读一些。

但不管怎样. .有什么好的方法来解决这个问题吗?

感谢

Answer 1

首先，我想将可观察对象分配给组件中的searchResultArticles$字段。然后我将异步管道的结果赋值给一个模板变量。这个洞应该是这样的:

类代码:

searchResultArticles$: Observable<Article[]>;
constructor(private http: HttpClient) {
}
getSearchResultArticles$(): Observable<Article[]> {
// get articles from somewhere, at best from a separate service class
return this.http.get<Article[]>(`/articles`);
}
ngOnInit() {
this.searchResultArticles$ = this.getSearchResultArticles$();
}

模板代码:

<mat-optgroup label="Articles" *ngIf="searchResultArticles$ | async as searchResultArticles">
<mat-option *ngFor="let article of searchResultArticles" [value]="article">
<img class="example-option-img" aria-hidden [src]="getArticleThumbnail(article.profile_dir,article.title)"
height="25"/>
<span class="cocktail_name_search_result" *ngIf="article.title" [innerHTML]="article.title | highlight : autoCompleteInput.value : 1"></span>
&nbsp;-&nbsp;
<span class="cocktail_desc_search_result" *ngIf="article.desc" [innerHTML]="article.desc  | highlight : autoCompleteInput.value : 1"></span>
</mat-option>
</mat-optgroup>

如果你想省略整个组，如果searchResultArticles是空的，把它放在ng-container作为@Thomas建议

Answer 2

您需要知道的是async管道可以返回null。

你的方法可以是:

<ng-container *ngIf="searchResultArticles$ | async as data">
<mat-optgroup *ngIf="data.length > 0" label="Articles">
</ng-container>