在带有 *ngFor 的 Angular 2 模板中使用 observable [英] Using observables in an Angular 2 template with *ngFor

问题描述

如果我使用 *ngFor 构建访问链，我将无法访问异步管道提供的对象的属性.

在下面的示例中，假设测试行中的 Parking 和下面的 ?.[filter.propName] 两行表示同一对象上的相同键.测试行将评估为真，但检查属性不会.为什么?使用 *ngFor 标记这些内容时如何访问属性?

例如，如果 {{(compModel | async)?.Parking?.Garage}} === true 我期望 {{(compModel | async)?.[filter.propName].instance}} === true 也是如此，但事实并非如此.

下面的语法不起作用.我用它来演示预期的功能.

...<fieldset class="filter-category-title"><legend>{{filter.name}}</legend><label *ngFor="let instance of filter.options">测试:{{(compModel | async)?.Parking.instance}}<输入类型=复选框"选中={{(compModel | async)?.[filter.propName].instance}}(click)="amenityEmit({category: filter.propName, filter: instance, resetCategory: false})">{{实例}}</fieldset>

我从服务器获取的过滤器数据格式如下.我用它来构建一个比较模型，也在下面，这是我管理搜索结果页面状态的方式.([key: string] 总是来自过滤器的 propName).

export interface Filter {基数:布尔值，过滤器:字符串，道具名称:字符串，联合类型:字符串，输入类型:字符串，选项: {选项:字符串[]，部分标题:字符串}[] |细绳[]}

compModel 接口:

导出接口 CompModel {[键:字符串]:{触摸:布尔值联合类型:字符串，选项: {选项:字符串[]，部分标题:字符串}[] |细绳[]，updateSelf(x: CompModel, y: Action): 无效}}

解决方案

安全导航运算符 ?. 不适用于 [].没有 ?[] 操作符，也没有 ?.[] 或 .[] 操作符，因此这行不通.>

你可以试试

{{(compModel | async) &&(compModel | async)[filter.propName].instance}} === true

否则你需要将一些代码移到组件类中

例如

this.compModel = someService.getSomeObservable().filter(val => !!val)

确保没有null值

I am unable to access a property of an object provided by the async pipe if I build the access chain using *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?

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>

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 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.

You can try

{{(compModel | async) && (compModel | async)[filter.propName].instance}} === true

otherwise you'll need to move some code to the components class

for example

this.compModel = someService.getSomeObservable()
.filter(val => !!val)

to ensure there are no null values

这篇关于在带有 *ngFor 的 Angular 2 模板中使用 observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！