Angular Run *ngFor on particular Indexes Defined in Array

Question

I am using a *ngFor loop but I only want the loop to run on particular indexes defined in an array (i.e. indexArray = [454,640]).

If I try this, and the indexArray has two or more elements, it does not work. But If the array has only one element (i.e. indexArray=[565]) it works.

<div *ngFor="let item of items; index as i">
  <table *ngIf="i == indexArray">

So you only want to display the items at index 454 and 640 from the `items` array? Is that your goal? — Nick Parsons, Dec 03 '20 at 02:00
Use = 0">; In your case, you tried to compare with `==` this operator will convert the operand on the right hand to number(`Number([565]) => 565` that why it equal to 565) — ttquang1063750, Dec 03 '20 at 02:01

score 5 · Accepted Answer · answered Dec 03 '20 at 02:03

5

You can use .indexOf(i) and check whether it is in your indexArray variable.

<div *ngFor="let item of items; index as i">
  <table *ngIf="indexArray.indexOf(i)> -1"> 
  <!-- REST OF THE CODE -->

answered Dec 03 '20 at 02:03

Harshana

Ivan · Answer 2 · 2020-12-03T02:22:01.483

0

You can do the following:

<div *ngFor="let item of items; index as i">
  <table *ngIf="indexArray.includes(i)">
    enter code here...
  </table>
</div>

edited Dec 03 '20 at 02:22

answered Dec 03 '20 at 02:16

Ivan

score 0 · Answer 3 · answered Dec 03 '20 at 03:21

0

create index array like this

public indexArray: array = [454,640];

do like below.

<div *ngFor="let item of items; index as i">
  <table *ngIf="indexArray.indexOf(i)> -1">
    enter code here...
  </table>
</div>

let me know if you have any doubt.

answered Dec 03 '20 at 03:21

Piyush Jain

3 Answers3