Angular 为什么可以'；t我用括号符号在角2中定义变量

我一直试图用括号符号定义一个变量，只是为了熟悉它的工作原理，但没有得到任何结果。不幸的是，我在一台使用Plunkr键盘的平板电脑上，所以我无法打开控制台查看出了什么问题，希望有人能够在不需要控制台发出错误消息的情况下发现问题

我在component类中的代码目前如下所示

var  demoA:string='name';
var  demoB:string='city';
var  demoD:string='';
var  demoC:{[propName: string]:string}= {};

demoC['demoA']= demoD;

虽然我使用的是typescript，但在变量的开头我并没有

var

，但我最终决定在MDN站点上设置它，但仍然没有得到任何结果，这个小部件在加载时保持不变。我还尝试将此添加到所有内容中，以尝试创建新属性。我的目标是让

demoC

具有

name=''

属性。我错过了什么

这是我关于plunker的全部档案

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <p>{{demoA}}</p>
    <p>{{demoB}}</p>
    <br />
    <p>{{demoC}}</p>
  `,
})
export class App {
  name:string;

  var  demoA:string='name';
  var  demoB:string='city';
  var  demoD:string='';
  var  demoC:{[propName: string]:string}= {};

  demoC[demoA]= demoD;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
{{demoA}}

{{demoB}}



{{demoC}}

`,
})
导出类应用程序{
名称：字符串；
var demoA:string='name'；
var demoB:string='city'；
变量解调器：字符串=“”；
var demoC:{[propName:string]：string}={}；
demoC[demoA]=解调器；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

您使用了名为

demoA

的

字符串，而不是变量值。它将创建一个名为
demoA
的属性。从
[]
符号中删除
'
，让
[]
语法计算表达式并从中获取值

demoC[demoA]= demoD;

这是一个例子

根据你的密码，你有一些错误

从变量声明中删除
var
部分。
将
演示
的赋值运算符放入
构造函数
。它将您的语句理解为重复变量

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <p>{{demoA}}</p>
    <p>{{demoB}}</p>
    <br />
    <p>{{demoC}}</p>
  `,
})
export class App {
  name: string;

  demoA: string = 'name';
  demoB: string = 'city';
  demoD: string = '';
  demoC: { [propName: string]: string} = {};

  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.demoC[this.demoA]= this.demoD;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

从'@angular/core'导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
{{demoA}}

{{demoB}}



{{demoC}}

`,
})
导出类应用程序{
名称：字符串；
demoA:string='name'；
演示：字符串='city'；
解调器：字符串=“”；
演示：{[propName:string]：string}={}；
构造函数（）{
this.name=`Angular！v${VERSION.full}`；
this.demoC[this.demoA]=this.demoD；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

代码示例

我也试过了，只是又试了一次。小部件仍然停留在说
加载…
。这是工作代码部分。你这边可能有什么事。用您的方法创建一个名为
demoA
的属性，用
名称创建属性。尝试用PCI打开刚才更新了我的问题以编辑plunker代码。@Optiq。此行需要
This.demo[This.demoA]=This.demoD
。