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

问题描述 投票:0回答:3

让我们假设我有一个空的可观察对象,它在某个时刻被填满了这样的数据:

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
3个回答
2
投票

这样做会起作用(见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;
}

1
投票

我有一个来自@ 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>

0
投票

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

安全导航操作符表示为(?。),它在我们从对象访问属性时使用。

你写的第一个表达是

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

这将(props$ | async)视为对象,然后将.obj视为其属性,将另一个属性视为.property,而不是你想要的情况。

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

安全导航器操作员使用点表示法访问对象的属性,并且不使用括号进行属性查找。 (例如对象[查找])

© www.soinside.com 2019 - 2024. All rights reserved.