让我们假设我有一个空的可观察对象,它在某个时刻被填满了这样的数据:
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>
这样做会起作用(见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;
}
我有一个来自@ 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>
首先,引用安全导航操作员的文档
安全导航操作符表示为(?。),它在我们从对象访问属性时使用。
你写的第一个表达是
<span>{{(props$ | async)?.obj.property}}</span>
这将(props$ | async)
视为对象,然后将.obj
视为其属性,将另一个属性视为.property
,而不是你想要的情况。
object.property
会产生一个值,您需要将此值作为括号中的查找传递给props$
。
安全导航器操作员使用点表示法访问对象的属性,并且不使用括号进行属性查找。 (例如对象[查找])