在带有 *ngFor 的 Angular 2 模板中使用 observables答案

【问题标题】：Using observables in an Angular 2 template with *ngFor在带有 *ngFor 的 Angular 2 模板中使用 observables
【发布时间】：2017-06-22 18:52:51
【问题描述】：

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

在下面的示例中，假设测试行中的Parking 和下面的两行?.[filter.propName] 代表同一个对象上的同一个键。测试行将评估为真，但选中的属性不会。为什么？使用 *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[]
}

compModel 接口：

export interface CompModel {
  [key: string]: {
    touched: boolean
    unionType: string,
    options: {
      options: string[],
      sectionTitle: string
    }[] | string[],
    updateSelf(x: CompModel, y: Action): void
  }
}

【问题讨论】：

thing.['key'] 没有意义，要么是 thing.key 要么是 thing['key']。
@jonrsharpe key.x 是一个评估为字符串的变量。当我需要的x 不在thing.key.x 下，而是在thing.x 下时，在这里请求链式属性是不正确的。由于我只能通过key.x 访问x，这就是我访问它的方式。我应该换一种方式吗？
澄清一下——你目前正在做thing1.[thing2.key]，这在任何地方都不是有效的语法。 thing1[thing2.key] 可以使用，但不能与 ? 一起使用。
明白了。我知道上面是不正确的，只是不知道如何处理来自 observable 的初始 null 值。谢谢！此外，您的愿望清单上的 MX Master 鼠标也非常出色。我现在正在使用我的。

标签： angular typescript angular2-template angular2-directives rxjs5

【解决方案1】：

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

你可以试试

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

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

例如

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

确保没有null 值

【讨论】：

第一个位解决了我的问题，非常感谢！作为记录，我需要处理的 null 值是页面加载时可观察到的 null 值，而不是我通过异步订阅获得的 null 值。