Optiq Optiq - 3 years ago 92
TypeScript Question

Why can't I define my variable with bracket notation in Angular 2

I've been trying to define a variable with bracket notation just to get familiar with how it works and aren't getting any results. Unfortunatelt I'm on on a tablet with a keyboard using Plunkr so I can't open the console and see what's going wrong, hopefully someone can spot the problem without needing an error message from the console.

my code inside the component class currently looks like this

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

demoC['demoA']= demoD;


seing that I'm using typescript I didn't originally have
var
at the beginning of the variables but I eventually decided to set it up as it was on the MDN site and still didn't get any results, the widget just stays stck on loading. I also tried adding
this.
to everything in the attempt to create the new property. My goal is to have
demoC
with a property of
name=''
inside of it. What am I missing here?

Here's my entire file on 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 {}

Answer Source

You have used the string with name demoA, not the variables value. It will create a property with name demoA. Remove the '' from the [] notation to let the [] syntax to evaluate the expression and get the value from it.

demoC[demoA]= demoD;

This is the example in TypeScript playground

According to your Plunker code, you have some errors

Remove the var parts from the variables declarations. Put the assignment operator of the demoC into your constructor. It understands your statement as a duplicate variable.

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 {}

Code example

Plunker code example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download