Ошибка шаблона индекса массива при использовании * ngIf внутри ngFor In Angular 9 - PullRequest
0 голосов
/ 29 марта 2020
data=[
      {name:"Danger",color:"red",intensity:100},
      {name:"Success",color:"green",intensity:20},
      {name:"Warning",color:"yellow",intensity:70},
      {name:"cool",color:"blue",intensity:80}

     ]

<div *ngFor="let element of data;let i=index">
   <span *ngIf="element.intensity>50">
    {{i+1}} {{element.name}}
   </span>
</div>
Output:
1.Danger
3.Warning
4.cool
Desired Output
1.Danger
2.Warning
3.cool

В индексе 2 отсутствует, поскольку ни один элемент не отображался в индексе 2, но я хочу выводить в качестве желаемого результата.

Любое предложение или помощь приветствуются.

1 Ответ

1 голос
/ 29 марта 2020

Вариант 1 - Фильтр в @ Component :

@Component:

this.filteredData = this.data.filter(({ intensity }) => intensity > 50);

HTML:

<div *ngFor="let element of filteredData; index as i">
  {{ i + 1 }} {{ element.name }}
</div>

Вариант 2 - Фильтр @ Pipe :

@Pipe:

@Pipe({
  name: 'filterByIntensity'
})
export class FilterByIntensityPipe implements PipeTransform {
  transform(value: any[]): any[] { // Put the correspondent interface here
    return value.filter(({ intensity }) => intensity > 50);
  }
}

HTML:

<div *ngFor="let element of data | filterByIntensity; index as i">
  {{ i + 1 }} {{ element.name }}
</div>

Обратите внимание, что это очень Speci c @Pipe. Я бы порекомендовал вам создать что-то более общее c, например filterBy, где вы можете передать свойства для фильтрации и т. Д. c. и почему бы даже не использовать его в другом месте.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...