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

Question

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

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>

Answer 1

这样做

就可以了(见 https://stackblitz.com/edit/angular-bbs4sa(：

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

如果您需要 null 检查，那么我认为提取到组件中的函数是最容易的(见 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;
}

Answer 2

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

<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>

Answer 3

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

安全导航运算符表示为 (？.(，并在我们 正在从对象访问属性。

您编写的第一个表达式是

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

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

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

安全导航器操作员使用点表示法访问对象的属性，不适用于使用括号的属性查找。(例如对象[查找](