Loop through array of strings - angular2

Question

Yet very basic thing, but I am unable to figure out how to display array of strings in html template in angular2.

.html

<ul>
       <li *ngFor="#number of numberOptions">
          {{number}}
       </li>
</ul>

.ts

this.numberOptions= ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X"];

The above trick is not working for me, text editor shows error for #number in ngFor. Is this deprecated in new versions? or am I doing anything wrong here?

score 24 · Accepted Answer · answered May 08 '17 at 15:21

24

You have to declare the variable number with let.

   <li *ngFor="let number of numberOptions">
      {{number}}
   </li>

answered May 08 '17 at 15:21

SrAxi

19,787
11
46
65

1

Thank you for your answer. Just wondering why `#number` isn't working. – Amit Chigadani May 08 '17 at 16:12
Because you have to declare the variable with `let`. Is like traditional `for` in javascript: `for (var i = 0; i < length; i++ ){}`. This is the same thing, but instead of `var` you have to use `let` since this is TypeScript. You need to declare the variable within the scope block of the for, not use a declared variable outside it. – SrAxi May 08 '17 at 16:15
I am very well aware of `let` in typescript, but my question is here. http://stackoverflow.com/questions/37431578/iteration-a-json-object-on-ngfor-in-angular-2 If you see the post they have declared variable using using `#` – Amit Chigadani May 08 '17 at 16:20
2

@AmitChigadani the `#` syntax was used in beta versions of Angular. – AT82 May 08 '17 at 16:46
1

Oh. Thanks a ton @AJT_82 – Amit Chigadani May 08 '17 at 16:49

score 5 · Answer 2 · answered May 08 '17 at 15:22

5

use let instead of #

<ul>
       <li *ngFor="let number of numberOptions">
          {{number}}
       </li>
</ul>

answered May 08 '17 at 15:22

Fawad Mukhtar

780
5
9

score 2 · Answer 3 · answered May 08 '17 at 15:22

2

<ul>
       <li *ngFor="let number of numberOptions">
          {{number}}
       </li>
</ul>

answered May 08 '17 at 15:22

Rahul Singh

19,030
11
64
86

Loop through array of strings - angular2

3 Answers3

Linked