如果我使用 *ngFor 构建访问链,我将无法访问异步管道提供的对象的属性。
在下面的示例中,假设Parking
在测试线和?.[filter.propName]
下面的两条线代表同一对象上的相同键。测试行的计算结果将为 true,但检查的属性不会。为什么?当使用 *ngFor 标记这些内容时,如何访问该属性?
例如,如果{{(compModel | async)?.Parking?.Garage}} === true
我希望{{(compModel | async)?.[filter.propName].instance}} === true
也是如此,但事实并非如此。
下面的语法不起作用。我用它来演示预期的功能。
<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)。
export interface Filter {
base: boolean,
filter: string,
propName: string,
unionType: string,
inputType: string,
options: {
options: string[],
sectionTitle: string
}[] | string[]
}
补偿模型接口:
export interface CompModel {
[key: string]: {
touched: boolean
unionType: string,
options: {
options: string[],
sectionTitle: string
}[] | string[],
updateSelf(x: CompModel, y: Action): void
}
}