在带有* ngFor的Angular 2模板中使用可观察对象 [英] Using observables in an Angular 2 template with *ngFor
问题描述
如果我使用* ngFor构建访问链,则无法访问异步管道提供的对象的属性.
I am unable to access a property of an object provided by the async pipe if I build the access chain using *ngFor.
在下面的示例中,假设测试行中的Parking
和下面的?.[filter.propName]
两行代表同一对象上的相同键.测试行将评估为true,但checked属性则为true.为什么?用* ngFor将其标记出来时,如何访问属性?
In the example below, suppose that Parking
in the test line and the ?.[filter.propName]
two lines beneath represent the same key on the same object. The test line will evaluate to true, but the checked property does not. Why? How do I access the propery when stamping these out with *ngFor?
例如,如果{{(compModel | async)?.Parking?.Garage}} === true
我也会期望{{(compModel | async)?.[filter.propName].instance}} === true
,但事实并非如此.
For example, if {{(compModel | async)?.Parking?.Garage}} === true
I would expect {{(compModel | async)?.[filter.propName].instance}} === true
as well, but this isn't the case.
以下语法不起作用.我正在用它来演示预期的功能.
The syntax below doesn't work. I'm using it to demonstrate intended functionality.
<div *ngFor="let filter of filters | async">
...
<fieldset class="filter-category-title">
<legend>{{filter.name}}</legend>
<label *ngFor="let instance of filter.options">
test: {{(compModel | async)?.Parking.instance}}
<input type="checkbox"
checked={{(compModel | async)?.[filter.propName].instance}}
(click)="amenityEmit({category: filter.propName, filter: instance, resetCategory: false})">
{{instance}}
</label>
</fieldset>
</div>
我从服务器以以下格式获取的过滤器数据.我将使用它来建立一个比较模型(也在下面),这是我如何管理搜索结果页面的状态. ([key: string]
始终是过滤器的propName).
The filter data I get from the server in the format below. I use this to build a comparison model, also below, which is how I manage the state of my search results page. ([key: string]
is always a propName from a Filter).
export interface Filter {
base: boolean,
filter: string,
propName: string,
unionType: string,
inputType: string,
options: {
options: string[],
sectionTitle: string
}[] | string[]
}
compModel接口:
compModel interface:
export interface CompModel {
[key: string]: {
touched: boolean
unionType: string,
options: {
options: string[],
sectionTitle: string
}[] | string[],
updateSelf(x: CompModel, y: Action): void
}
}
推荐答案
安全导航操作符?.
不适用于[]
.没有?[]
运算符,也没有?.[]
或.[]
运算符,因此这是行不通的.
The safe-navigation operator ?.
does not work with []
. There is no ?[]
operator and also no ?.[]
or .[]
operator, therefore this can't work.
您可以尝试
{{(compModel | async) && (compModel | async)[filter.propName].instance}} === true
否则,您需要将一些代码移至组件类
otherwise you'll need to move some code to the components class
例如
this.compModel = someService.getSomeObservable()
.filter(val => !!val)
确保没有null
值
这篇关于在带有* ngFor的Angular 2模板中使用可观察对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!