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
