Is there a way to search inside the ng For

Question

I have two arrays files and currentlyRunning. Suppose the file is in index 0 and its progress is inside currentlyRunning[1].progress which is index 1 I am running the ngFor to show all files. Would this ngIf in the td work to fetch the correct progress because the index could be different but the file id is unique.

<tr *ngFor="let files of File; let index=i;">
  <td>
    {{file.name}}
  </td>
  <td>
    {{file.id}}
  </td>
  <td *ngIf="file.id === currentlyRunning[i].id">
    {{currentlyRunning.progress}}
  </td>
<tr>

It would be better to create a dictionary / indexer and retrieve it that way. That would be more readable and also more performant. — Igor, May 09 '19 at 18:57
See also [Declare and initialize a Dictionary in Typescript](https://stackoverflow.com/q/15877362/1260204), the `currentlyRunning` would be the lookup. — Igor, May 09 '19 at 18:58

score 0 · Answer 1 · answered May 09 '19 at 18:56

0

You can create a function in your component class and use it in your ngIf directive statement

answered May 09 '19 at 18:56

Hayk Aghabekyan

1,087
10
19

score 0 · Answer 2 · answered May 09 '19 at 19:31

I would suggest otherwise, you should map the data to each other...

ngOnChages() {
  this.mapedData = currentlyRunning.reduce((map, file) => {
    map[file.id] = file;
    return map;
  }, {} as { [id: number]: iFile });
}

Then you would use in your template just simple lookup:

<tr *ngFor="let file of files; let index=i;">
  <td>
    {{file.name}}
  </td>
  <td>
    {{file.id}}
  </td>
  <td *ngIf="mapedData[file.id] as currentlyRunning">
    {{currentlyRunning.progress}}
  </td>
<tr>

This way it is just O(n) complexity and you have a nice way to handle all of it

Is there a way to search inside the ng For

2 Answers2