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

缺少结尾的“（双引号）

*ngIf="album?.album_title

如下更改

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

Answer 2

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

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

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

这将是等待album$ | async求值，然后将结果绑定到album的值（非美元后缀）上。

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

prop$美元后缀通常用于表示某物是可观察的来源。

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

2 个答案: