Using slice in a multiple loop ngFor angular-CodePudding

Need to slice the inner ngfor loop into 3 parts

<div  *ngFor="let row of matrix; index as i">
 <div  *ngFor="let col of row; index as j">
  <div *ngFor="let placeholder of placeholders | slice:i:j">
   <ng-container [ngComponentOutlet]="placeholder.component" > 
   </ng-container>
  </div>
 </div>
</div>

CodePudding user response：

There are a couple of ways around this:

$any

<p *ngFor="let item of data | slice:2:4">
  {{ $any(item).parentName }}
</p>

Bracket notation

<p *ngFor="let item of data | slice:2:4">
  {{ item['parentName'] }}
</p>

A function

slicedData(data : any[]) : any[] {
  return data.slice(2,4)
}

<p *ngFor="let item of slicedData(data)">
  {{ item['parentName'] }}
</p>