Возникла проблема при отображении значения индекса директивы * ngFor в Angular 5

Question

Возникла проблема при отображении индекса директивы * ngFor для конкретного случая использования следующим образом.

Допустим, у нас есть массив объектов как

this.temp = [
  {name:'John',age:24,visibility:'visible',
  {name:'Kane',age:26,visibility:'hidden',
  {name:'Ross',age:28,visibility:'visible',
  {name:'Lui',age:21,visibility:'visible'
]

Для рендеринга в моем файле app.component.html у меня есть html следующим образом

<div *ngFor="let user of temp; let i = index">
 <div *ngIf="user.visibility === 'visible' ">
    <div>{{i+1}}</div>
    <div>{{user.name}}</div>
 </div>
</div>

Так, в соответствии с приведенным выше примером массива, он отображает пользователей

1.John
2.Ross
3.Lui

Теперь в моем пользовательском интерфейсе есть имя кнопки «Изменить видимость» для каждого пользователя, где оно переключает состояние видимости пользователя со «скрытого» на «видимый» и наоборот.

Таким образом, нажав на кнопку, упомянутую против Джона, он установит видимость как скрытый, но отображаемый пользовательский интерфейс

2.Ross
3.Lui

Мой ожидаемый результат -

1.Ross
2.Lui

Как правильно сделать индекс рендеринга?

Сценарий использования здесь заключается в том, что я не могу изменить / изменить свой массив this.temp с точки зрения длины. В основном мне нужен весь массив с измененным в нем только свойством видимости в соответствии с действиями пользователя.

Пожалуйста, помогите.

Answer 1

использовать пользовательскую функцию трекбай:

*ngFor="let user of temp; let i = index; trackBy: customTB"

customTB(index, item) {
  return index + ' - ' item.name;
}

Answer 2

Вы также можете достичь желаемого результата, используя Pipe, как это

HTML-компонент

<div *ngFor="let user of temp | visiblefilter ; let i=index">
    <span>{{i+1}} {{user.name}}</span> <button name={{user.name}} (click)="onHide($event)">Hide</button>
</div>

---

PIPE

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'visiblefilter',
    pure: false
})
export class VisibleFilterPipe implements PipeTransform {
    transform(items: any[]): any {
        return items.filter(({visibility}) =>visibility=='visible');
    }
}

Вы можете проверить здесь с рабочим примером stackblitz

Answer 3

Вы можете сначала отфильтровать массив:

<div *ngFor="let user of temp.filter(us => us.visibility === 'visible'); let i = index">
 <div>
    <div>{{i+1}}</div>
    <div>{{user.name}}</div>
 </div>
</div>

таким образом, вы также не анализируете все элементы массива, более эффективный и желаемый вывод.

ура!