如何在复杂对象的Angular *ngFor循环中获取异步条件属性答案

【问题标题】：How to get async conditional property inside Angular *ngFor loop of complex object如何在复杂对象的Angular *ngFor循环中获取异步条件属性
【发布时间】：2019-04-20 07:57:16
【问题描述】：

假设我有一个空的可观察对象，它在某个时刻被这样的数据填满：

const props$ =
{
  prop1: 1,
  prop2: 2,
  prop3: 3,
}

我有一个包含此类数据的循环：

const loopData =
[
 { property: "prop1", label: "First" },
 { property: "prop2", label: "Second" },
 { property: "prop3", label: "Third" },
]

这里是我的 HTML：

<div *ngFor="let obj of loopData">
    <label>{{ obj.label }}</label>
    <span>{{(props$ | async)?.obj.property}}</span> <---- this line of code will not work
</div>

如果我像(props$ | async)?[obj.property] 这样编写这些行，编译器会抱怨在] 之后询问:，认为我试图在一行中编写条件，这在 ES6 中可用。那么，有什么情况我可以更清楚地做到这一点。我想到的一个想法是这样做：

<div *ngFor="let obj of loopData">
    <label>{{ obj.label }}</label>
    <ng-container *ngIf="props$ | async as props">
        <span>{{props[obj.property]}}</span>
    </ng-container>
</div>

【问题讨论】：

标签： angular loops asynchronous observable

【解决方案1】：

这样做会起作用（请参阅https://stackblitz.com/edit/angular-bbs4sa）：

<li *ngFor="let obj of loopData">
  <label>{{obj.label}}</label>
  <span>{{(props$ | async)[obj.property]}}</span>
</li>

如果您需要空值检查，那么我认为最容易提取到组件中的函数（参见https://stackblitz.com/edit/angular-epvtnh）：

<li *ngFor="let obj of loopData">
  <label>{{obj.label}}</label>
  <span>{{getPropertyValue(props$ | async, obj.property)}}</span>
</li>

getPropertyValue(props: Record<string, number>, propertyName: string) {
  return props ? props[propertyName] : null;
}

【讨论】：

感谢您的回答，但为什么我不能在 ng-template 中使用异步管道包装元素，正如我在问题中所展示的那样？它看起来更清晰，不是吗？
我认为不可能使用安全导航运算符.? 后跟括号符号[] 来访问元素的属性。
你不明白我的意思。我将在下面发布我的解决方案。谢谢你的回答。

【解决方案2】：

我从@mike-jerred 那里得到了一个可行的解决方案。但我想我的回答也可以作为一个解决方案。

<ul>
  <li *ngFor="let obj of loopData">
    <label>{{obj.label}}</label>
    <ng-container *ngIf="props$ | async as props">
        <span>{{props[obj.property]}}</span>
    </ng-container>
  </li>
</ul>

【讨论】：

【解决方案3】：

首先，引用安全导航操作员的文档

安全导航操作符记为 (?.) 正在访问对象的属性。

你写的第一个表达式是

 <span>{{(props$ | async)?.obj.property}}</span>

这会将(props$ | async) 视为对象，然后将.obj 视为其属性，并将链接到它的另一个属性视为.property，这不是您想要的情况。

object.property 产生一个值，您需要将此值作为括号中的查找传递给props$。

安全导航运算符使用点表示法访问对象的属性，而不能使用方括号进行属性查找。（例如对象[查找]）

【讨论】：