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

抱歉，这似乎是一个基本问题。
如果存在“

album\u 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>

专辑
{{（相册|异步）？.album_title}
专辑日期
{{（相册|异步）？.album_日期}
专辑评级
{{（相册|异步）？.album_分级}

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

更新：基于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>

唱片滴度
{{album.album_title}
专辑日期
{{album.album_date}

与其等待每个

相册$| async

操作完全可用（这可能需要进一步在子表示组件内部进行更多条件检查），我们可以采用稍微不同的方法：

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

专辑
{{album.album_title}

注意在表达式末尾添加了

as album

这将要做的是等待计算

album$|async

，并将结果绑定到

album

的值（非美元后缀）

PS-您可能希望将组件类上的属性名称从

album

更改为

album$

prop$

dollar后缀通常用于表示某事物是 可观测源

---

与等待每个

album$|async

操作完全可用（这可能需要进一步在子表示组件内部进行更多条件检查）不同，我们可以采用稍微不同的方法：

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

专辑
{{album.album_title}

注意在表达式末尾添加了

as album

这将要做的是等待计算

album$|async

，并将结果绑定到

album

的值（非美元后缀）

PS-您可能希望将组件类上的属性名称从

album

更改为

album$

prop$

dollar后缀通常用于表示某事物是 可观测源

它缺少结尾”（双引号）

更改如下

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

专辑
{{（相册|异步）？.album_title}

它缺少结尾”（双引号）

更改如下

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

专辑
{{（相册|异步）？.album_title}

您是否尝试过

*ngIf=“album.album\u title

您好@user3284463-谢谢您的回复。不幸的是，是的，我尝试过：）如果album是Observable类型，那么您可以使用have you try

*ngIf=“album.album\u title

您好@user3284463-谢谢您的回复。不幸的是，是的，我有：）如果相册是可观察的类型，那么你可以使用Thanke@Saravanan-我不完全理解对“用户”的引用。我已经试过了，但恐怕不行。假设我有多个相册属性，如标题、日期、评论、评论等，每个属性都有自己的带有标签/标题的包装div。您的方法如何确保仅当每个字段包含一个值时才显示这些单独的包装器div？@Que，他只是举了一个例子。我已经更新了答案。请再读一遍。@SiddAjmera Thnks更新：）谢谢。我已经更新了我的问题。我不希望“全局”包装被隐藏。它是按价值计算的。我假设您的反应是隐藏整个Div，如果没有与标题、日期等相对应的“相册”，那么您的实现将一次又一次地打开可观察到的

相册

，但最终会给出相同的值。所以按你的方式做没有任何附加价值。谢谢@Saravanan-我不完全理解“用户”的含义。我已经试过了，但恐怕不行。假设我有多个相册属性，如标题、日期、评论、评论等，每个属性都有自己的带有标签/标题的包装div。您的方法如何确保仅当每个字段包含一个值时才显示这些单独的包装器div？@Que，他只是举了一个例子。我已经更新了答案。请再读一遍。@SiddAjmera Thnks更新：）谢谢。我已经更新了我的问题。我不希望“全局”包装被隐藏。它是按价值计算的。我假设您的反应是隐藏整个Div，如果没有与标题、日期等相对应的“相册”，那么您的实现将一次又一次地打开可观察到的

相册

，但最终会给出相同的值。我也试过：（-谢谢你指出，这是输入StackOverflow时的一个输入错误，与任何代码相反。如果相册的类型是可观察的，那么你可以使用我也试过的：（-谢谢你指出这一点，当你将它输入StackOverflow时，这是一个输入错误，与任何代码相反。如果相册的类型是可观察的，那么你可以使用