Angular 8 和 Angular 10 之间的不同 *ngFor 行为

Question

I have recently updated a project from Angular 8 to Angular 10 and have had a few issues. I am looping over two separate lists and displaying data

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let column of columns; let i of index">
    Field: {{column['field']}} 
    <br>
    Name: {{column['name']}} 
    <br>
    Index: {{i}}
  </div>`
})
export class AppComponent  {
  @Input() name: string;
  columns: object[] = [
    {field: 'FIELD_A', name:'NAME_A'},
    {field: 'FIELD_B', name:'NAME_B'}
    ];
  index: number[] = [0,1];
}

In angular 8 my output looks like

Field: FIELD_A
Name: NAME_A
Index: [object Object]
Field: FIELD_B
Name: NAME_B
Index: [object Object]

In angular 10 my output looks like

Field:
Name:
Index: 0
Field:
Name:
Index: 1

My questions are:

1. Why is this behaviour different between the versions? Is this a bug or was this intentional?
2. Why does angular 8 display the index as an object?

Note that substituting let i of index with let i = index gives the correct consistent output for both

Field: FIELD_A
Name: NAME_A
Index: 0
Field: FIELD_B
Name: NAME_B
Index: 1

Answer 1

You should not use your variant of NgForOf-syntax because it does not correspond to API reference ( https://angular.io/api/common/NgForOf ). You should use something like:

<div *ngFor="let column of columns; index as i">
    Field: {{column['field']}} 
    <br>
    Name: {{column['name']}} 
    <br>
    Index: {{i}}
  </div>

Answer 2

About the Index you are using the wrong syntax, here is the right one:

<div *ngFor="let column of columns; let index = index">

About the version migration: Angular 10 uses a strict mode on template type checking by default. As it can't check it with your syntax, i would assume it doesn't display it. You can change it by calling directly the property:

Field: {{column.field}} 
    <br>
    Name: {{column.name}}