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>

如果您需要空检查，那么我认为将其提取到组件中的函数最容易（请参见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-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>

Answer 3

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

安全导航运算符表示为（？。），在我们使用正在从对象访问属性。

您编写的第一个表达式是

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

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

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

安全导航操作符可用于使用点表示法访问对象的属性，而不适用于使用方括号进行的属性查找。（例如object [lookup]）

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

3 个答案: