时间戳

首页 > 解决方案 > 检查 Observable 是否为空是不可能的，那么我还有什么其他选择？

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

问题描述

我写了一个 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>

因此即使Observable中没有项目，也会显示mat-optgroup带有标签的标签。如果没有项目，我希望能够隐藏它。ArticlessearchResultARticles$mat-optgroup

我想过这样做：

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

但这会导致一些奇怪的行为，有时项目不会出现，我想我只能使用一次异步？我想我需要多读一些。

但无论如何..有什么优雅的方法来解决这个问题吗？

谢谢

标签： angulartypescriptangular-observable

解决方案

首先，我想将 observable 分配给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 的建议将其放入

推荐阅读