javascript - Why index variable not display indexing in *ngFor loop in Angular 2? - Stack Overflow

admin管理员组

文章数量:1022956

If we want to display the index of ng-repeat in angular 1,

we use the following code

<div ng-repeat="car in cars">
 <ul>
  <li>Index: {{$index+1}}</li>
  <li>Car Name:{{car.name}}</li>
 </ul>
</div>

Now when the same I implement in Angular 2, it is not displaying index value

<div *ngFor="#car of cars">
 <ul>
      <li>Index: {{index+1}}</li>
      <li>Car Name:{{car.name}}</li>
     </ul>
 </div>

But when I add #i = index in *ngFor, it suddenly display index value

 <div *ngFor="#car of cars; #i = index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

As both 2nd and 3rd code are same, but it work only when we declare the local variable and assign the variable to index.

Such an ambiguous thing.

Will any one help to understand better use of this ?

If we want to display the index of ng-repeat in angular 1,

we use the following code

<div ng-repeat="car in cars">
 <ul>
  <li>Index: {{$index+1}}</li>
  <li>Car Name:{{car.name}}</li>
 </ul>
</div>

Now when the same I implement in Angular 2, it is not displaying index value

<div *ngFor="#car of cars">
 <ul>
      <li>Index: {{index+1}}</li>
      <li>Car Name:{{car.name}}</li>
     </ul>
 </div>

But when I add #i = index in *ngFor, it suddenly display index value

 <div *ngFor="#car of cars; #i = index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

As both 2nd and 3rd code are same, but it work only when we declare the local variable and assign the variable to index.

Such an ambiguous thing.

Will any one help to understand better use of this ?

• javascript
• angular
• loops
• ngfor

Share Improve this question Follow edited May 30, 2017 at 15:00 George 6,75922 gold badges3131 silver badges3636 bronze badges asked May 30, 2017 at 12:17 VIKAS KOHLIVIKAS KOHLI 8,48044 gold badges5151 silver badges6666 bronze badges 1

• 1 2nd and 3rd code aren't the same? – AVJT82 Commented May 30, 2017 at 12:22

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

reference this:https://angular.io/docs/ts/latest/api/mon/index/NgFor-directive.html

<div *ngFor="#car of cars;let i=index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

<div *ngFor="let car of cars; index as i">
  <ul>
    <li>Index: {{i}}</li>
    <li>Car Name:{{car.name}}</li>
  </ul>
</div>

<li *ngFor="let item of items; let i = index;">
    {{i}}
</li>

DEMO PLNKR

To prevent overriding of variables within your template. There is also the odd, even, first, last variable you can assign in the *ngFor loop. But if you had a ponent like this:

@Component({..})
export class SillyComponent {

   public first: number;
   public last: number;
   public index: number;

}

There is no way to access these from within the *ngFor loop if they are immediately assigned by the templating engine. This is one of the reasons why you have to declare them first explicitly inside your template. Besides that, it also gives you better IDE hinting and readability of your code

I also see you are using a very very old notation. You should use the let keyword in templates now to declare variables:

<div *ngFor="let car of cars; let i = index">
   <ul>
        <li>Index: {{i+1}}</li>
        <li>Car Name:{{car.name}}</li>
   </ul>
</div>

The reason you can't use index is that it is in the local scope of ng-for

<div *ngFor="#car of cars; #i = index">

# or let denotes local variables , index over here is the local variable for ng for so outside ng for it is not defined so it is not accessible, to access this data we use local variable from current scope to refer local scope of ng for. So for this specific reason we need to refer using any local variable.

Your 1st code snippet is angular 1.x ng-repeat, which creates new child scope, So $index is the property of new child scope which is exposed and you can use directly. Like you use any $scope property of controller without prefixing $scope to it in html.

now in angular2, In this case there is no separate scope, just this of javascript.

Also, angular2+ is written in typescript So ngFor export the variable index(also other properties like odd, even , first, last), to consume it you need to declare some local variable.

ngFor creates a block like for loop of javascript. and i creates a template local variable to get the index of the array.

also, use let instead of #, changed since 2.0.0-beta.17

Here are some good articles for parison. link, link

If we want to display the index of ng-repeat in angular 1,

we use the following code

<div ng-repeat="car in cars">
 <ul>
  <li>Index: {{$index+1}}</li>
  <li>Car Name:{{car.name}}</li>
 </ul>
</div>

Now when the same I implement in Angular 2, it is not displaying index value

<div *ngFor="#car of cars">
 <ul>
      <li>Index: {{index+1}}</li>
      <li>Car Name:{{car.name}}</li>
     </ul>
 </div>

But when I add #i = index in *ngFor, it suddenly display index value

 <div *ngFor="#car of cars; #i = index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

As both 2nd and 3rd code are same, but it work only when we declare the local variable and assign the variable to index.

Such an ambiguous thing.

Will any one help to understand better use of this ?

If we want to display the index of ng-repeat in angular 1,

we use the following code

<div ng-repeat="car in cars">
 <ul>
  <li>Index: {{$index+1}}</li>
  <li>Car Name:{{car.name}}</li>
 </ul>
</div>

Now when the same I implement in Angular 2, it is not displaying index value

<div *ngFor="#car of cars">
 <ul>
      <li>Index: {{index+1}}</li>
      <li>Car Name:{{car.name}}</li>
     </ul>
 </div>

But when I add #i = index in *ngFor, it suddenly display index value

 <div *ngFor="#car of cars; #i = index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

As both 2nd and 3rd code are same, but it work only when we declare the local variable and assign the variable to index.

Such an ambiguous thing.

Will any one help to understand better use of this ?

• javascript
• angular
• loops
• ngfor

Share Improve this question Follow edited May 30, 2017 at 15:00 George 6,75922 gold badges3131 silver badges3636 bronze badges asked May 30, 2017 at 12:17 VIKAS KOHLIVIKAS KOHLI 8,48044 gold badges5151 silver badges6666 bronze badges 1

• 1 2nd and 3rd code aren't the same? – AVJT82 Commented May 30, 2017 at 12:22

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

reference this:https://angular.io/docs/ts/latest/api/mon/index/NgFor-directive.html

<div *ngFor="#car of cars;let i=index">
     <ul>
          <li>Index: {{i+1}}</li>
          <li>Car Name:{{car.name}}</li>
         </ul>
 </div>

<div *ngFor="let car of cars; index as i">
  <ul>
    <li>Index: {{i}}</li>
    <li>Car Name:{{car.name}}</li>
  </ul>
</div>

<li *ngFor="let item of items; let i = index;">
    {{i}}
</li>

DEMO PLNKR

To prevent overriding of variables within your template. There is also the odd, even, first, last variable you can assign in the *ngFor loop. But if you had a ponent like this:

@Component({..})
export class SillyComponent {

   public first: number;
   public last: number;
   public index: number;

}

There is no way to access these from within the *ngFor loop if they are immediately assigned by the templating engine. This is one of the reasons why you have to declare them first explicitly inside your template. Besides that, it also gives you better IDE hinting and readability of your code

I also see you are using a very very old notation. You should use the let keyword in templates now to declare variables:

<div *ngFor="let car of cars; let i = index">
   <ul>
        <li>Index: {{i+1}}</li>
        <li>Car Name:{{car.name}}</li>
   </ul>
</div>

The reason you can't use index is that it is in the local scope of ng-for

<div *ngFor="#car of cars; #i = index">

# or let denotes local variables , index over here is the local variable for ng for so outside ng for it is not defined so it is not accessible, to access this data we use local variable from current scope to refer local scope of ng for. So for this specific reason we need to refer using any local variable.

Your 1st code snippet is angular 1.x ng-repeat, which creates new child scope, So $index is the property of new child scope which is exposed and you can use directly. Like you use any $scope property of controller without prefixing $scope to it in html.

now in angular2, In this case there is no separate scope, just this of javascript.

Also, angular2+ is written in typescript So ngFor export the variable index(also other properties like odd, even , first, last), to consume it you need to declare some local variable.

ngFor creates a block like for loop of javascript. and i creates a template local variable to get the index of the array.

also, use let instead of #, changed since 2.0.0-beta.17

Here are some good articles for parison. link, link

本文标签： javascriptWhy index variable not display indexing in *ngFor loop in Angular 2Stack Overflow