Angular 2 how to iterate through multi-dimensional arrays?

Update (2.0.0)

<table>    <ng-container *ngFor="let lesson of LESSONS; let i = index">      <ng-container *ngFor="let point of lesson.points; let j = index">        <tr>{{point}}</tr>      </ng-container>    </ng-container>

<ng-container> is a helper element that is not stamped to the DOM. It allows to use the same syntax as inline *ngIf and *ngFor

Original

Try this one:

<table><template ngFor #lesson [ngForOf]="LESSONS" #i="index">  <template ngFor #point [ngForOf]="lesson.points" #j="index">  <tr>{{point}}</tr>  </template></template>

Working example Working Plunker.

This worked for me in Angular 4, using Pardeep Jain's answer as a basis. Almost the same as StepUps answer, but with ng-containers:

 constructor() {        this.data = {              displayArray:[                ["Top Row 1st col", "Top Row 2nd col", "Top Row 3rd col"],                ["Middle Row 1st col", "Middle Row 2nd col", "Middle Row 3rd col"],                ["Bottom Row 1st col", "Bottom Row 2nd col", "Bottom Row 3rd col"]            ]        }    };

in the template:

<table >    <ng-container *ngFor="let row of data.displayArray; let i = index">        <tr>            <ng-container *ngFor="let col of row; let j = index">                <td>{{col}}</td>            </ng-container>        </tr>     </ng-container></table>

I didn't need the indexes, but I left them in in case they are needed by others.

try to use this pipe

@Pipe({ name: 'values',  pure: false })export class ValuesPipe implements PipeTransform {  transform(value: any, args: any[] = null): any {    return Object.keys(value).map(key => value[key]);  }}<div *ng-for="#value of object | values"> </div>