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

你需要知道的是 async pipe can return null.

您的方法可以是：

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

Answer 2

起初我想将 observable 分配给组件中的一个 searchResultArticles$ 字段。然后我将异步管道的结果分配给模板变量。洞的东西应该是这样的：

Class代码：

  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 为空时忽略整个组，请按照@Thomas 的建议将其放在 ng-container 中

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

Check if Observable is empty is not possible, so what other option I have?

typescript

angular

angular-observable