Loop through array of strings - angular2

angular ngfor angular-template
Amit Chigadani picture Amit Chigadani · May 8, 2017 · Viewed 20.9k times · Source

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?

Answer

SrAxi picture SrAxi · May 8, 2017

You have to declare the variable number with let.

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

Related questions

Angular io (4) *ngFor first and last

I am trying to tell whether an item in an *ngFor is the first or last element to style a container. Is there a way to do something like this? <md-expansion-panel *ngFor="let item of items" *ngClass="{ 'first' : item.…

Read More
ngFor with index as value in attribute

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works. I basically have …

Read More
*ngIf and *ngFor on same element causing error

I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently fails when trying to access its …

Read More