heman123
heman123

Reputation: 3003

Printing JSON key and value in ANGULAR 2 using *ngFor

Sorry folks. I am completely new to Angular 2. You might be thinking this is the repetition but i am having lots of problem here. I have searched this question and got the answer but i am unable to implement it. The probable solutions for this answer is offered in this link: Iterate over TypeScript Dictionary in Angular 2

The solution is to use pipe. But i have some doubt in the syntax and i am unable to find it so asking the experts how to use it ! this solution does not use pipes but I still tried it as the error is same in all the other methods i have tried to implement

import {Component} from 'angular2/core';
@Component({
  selector: 'component',
  templateUrl: `
   <ul>
   <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
   </ul>
  `
})
export class Home {
  myDict : Dictionary;
  constructor() {
  this.myDict = {'key1':'value1','key2':'value2'};
}
keys() : Array<string> {
return Object.keys(this.myDict);
}
}
interface Dictionary {
[ index: string ]: string
}

the line :

 <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>

is showing error every time i try to implement it. And it is same all the time : under #keys and under keys()

and this is the console error message being displayed:

zone.js:355 Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token #, expected identifier, keyword, or string at         column 11 in [ngFor let #key of keys();] in AppComponent@12:11 ("

 <ul>
   <li [ERROR ->]*ngFor="let #key of keys();">{{key}}:{{myDict[key]}}</li>
  </ul>

"): AppComponent@12:11
Parser Error: Unexpected token #, expected identifier, keyword, or string at     column 11 in [ngFor let #key of keys();] in AppComponent@12:11 ("

 <ul>
   <li *ngFor="let #key of keys();">[ERROR ->]{{key}}:{{myDict[key]}}</li>
  </ul>

"):

please suggest me what to do. what am i missing here? The same error has been displayed with several other solutions mentioned in the link. So if i solve this problem i can solve the other solutions as well. Thank you

Upvotes: 2

Views: 3318

Answers (1)

Yaroslav Grishajev
Yaroslav Grishajev

Reputation: 2137

Use let not # - this is changed since RC.6

Upvotes: 4

Related Questions