变量的 Angular2 插值括号表示法（而不是点）

Question

我想知道是否有一个 Angular2 等同于 Javascript 中的括号表示法，它允许您将变量用于 select 对象属性。或者做同样事情的方法。

考虑这段代码：

 let selector = "foo";
 let someObject = {foo: "some content", guu: "some other content"};
 console.log(someObject[selector]); //bracket notation, logs "some content"

我在 Angular2 中尝试了以下方法：

  {{someObject[selector]}}
  {{someObject['selector']}}

都没用。如果没有 Javascript，还有另一种方法吗？

Answer 1

这似乎在 Angular 中工作得很好：https://stackblitz.com/edit/angular-mrky5n。

它可能无法在您当前的应用程序中工作的一些原因：

1) 如果 selector 是一个带有字符串选择器的变量，那么 selector 变量可能在模板范围内不可用（例如，它是 private组件class，在方法中定义，或生命周期钩子等

2) 如果 selector 是您实际要访问的属性，可能 selector 的名称有错字——也许是真正的属性是 selectro 或 selecter。这是不使用这种方法的原因，因为您失去了 Typescript 的类型检查。 someObject.selectorr 抛出错误，而 someObject['selectorr'] 正常。

3) 属性尚未收到值——也许 safe navigation operator 会有所帮助。

Answer 2

Angular template syntax 支持许多 JS 功能，包括括号符号。

{{someObject[selector]}} 表达式假定 someObject 和 selector 都是组件属性。如果它们是用 let.

定义的局部变量，这将不起作用

变量的 Angular2 插值括号表示法（而不是点）

Angular2 interpolation bracket notation (instead of dot) for variables

javascript

interpolation

typescript

angular-template

angular