angular2中具有连字符属性的猫王运算符答案

【问题标题】：Elvis operator with hyphenated properties in angular2angular2中具有连字符属性的猫王运算符
【发布时间】：2016-03-27 11:09:32
【问题描述】：

在 angular2 模板中访问连字符属性时如何使用 elvis 运算符

http://plnkr.co/edit/z3Wqn7EScgxcAhrFJWjv?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
     {{asyncObj1?.theprop}}
     {{asyncObj2?['the-prop']}} <!-- this throws error -->
    </div>
  `,
  directives: []
})
export class App {
  constructor() {

    setTimeout(function(){
      this.asyncObj1 = {
      'theprop': 'value'
    } 
      this.asyncObj2 = {
      'the-prop': 'async value'
    }  
    }, 2000) 

  }
}

【问题讨论】：

你需要一个 ngIf。类似<div *ngIf="asyncObj2">{{asyncObj2['the-prop']}}</div>
或 <template [ngIf]="asyncObj2"> {{asyncObj2['the-prop']}} </template> ，不会留下任何额外的标记，即 - div wrapper。

标签： angular angular-template

【解决方案1】：

您目前似乎不能，因为它似乎没有添加对索引器表示法的支持。

这是在 this 拉取请求中添加到 Angular 2 的，因为 Typescript 中的问题 #16 被“阻止”或暂停，直到有对此类运算符的标准化 ES 支持。

本质上，操作符可以在 Angular2 中扩展以支持两者。属性语法和索引器语法，但拉取请求似乎没有提供任何迹象表明这是意图或当前支持它，尤其是当您查看相关测试时。

【讨论】：