Angular

Question

对于看似基本的问题表示歉意。
有没有一种方法可以仅在“album_title”值存在时显示包装器 div？以下是我到目前为止尝试过的内容。

    <div *ngIf="album?.album_title">
        <div> Album </div>
        <div> {{ (album | async)?.album_title }} </div>
    </div>

    <div *ngIf="album?.album_date">
        <div> Album Date</div>
        <div> {{ (album | async)?.album_date }} </div>
    </div>

    <div *ngIf="album?.album_rating">
        <div> Album Rating</div>
        <div> {{ (album | async)?.album_rating }} </div>
    </div>

更新已更新以清楚地显示可能存在多个值。

更新：基于 Saravanan Nandhan 回复的回答

  <div *ngIf="album | async as album">
    <div *ngIf="album.album_title">
      <div> Album Titel </div>
      <div> {{ album.album_title }} </div>
    </div>
   <div *ngIf="album.album_date">
      <div> Album Date </div>
      <div> {{ album.album_date }} </div>
    </div>
  </div>

Answer 1

我们可以采用稍微不同的方法，而不是等待每个 album$ | async 操作完全可用，这可能需要在子表示组件内部进一步进行更多条件检查：

<div *ngIf="album$ | async as album">
  <div> Album </div>
  <div> {{ album.album_title }} </div>
</div>

注意在表达式末尾添加 as album。

这将等待 album$ | async 计算完成，并将结果绑定到 album 的值（非美元后缀）。

PS - 您可能希望将组件 Class 上的属性名称从 album 更改为 album$

The prop$ dollar suffix is generally used to indicate something is an Observable source.

Answer 2

缺少结尾 "（双引号）

*ngIf="album?.album_title

修改如下

<div *ngIf="album?.album_title">
    <div> Album </div>
    <div> {{ (album | async)?.album_title }} </div>
</div>

Angular - 如何在异步值上使用 ngIf

Angular - How to use ngIf on async value

angular-ng-if