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?

Phytosociology

Answer 1

You have to declare the variable number with let.

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

Fungiform

Thank you for your answer. Just wondering why #number isn't working. – Phytosociology

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. – Fungiform

I am very well aware of let in typescript, but my question is here. #37432078 If you see the post they have declared variable using using # – Phytosociology

@AmitChigadani the # syntax was used in beta versions of Angular. – Pyrrha

Oh. Thanks a ton @AJT_82 – Phytosociology

Answer 2

use let instead of #

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

Flanders

Answer 3

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

Proprietary