Как получить непрерывный индекс для видимых элементов в angular и игнорировать индексацию скрытых элементов * ngFor?

Question

У меня есть 2 angular компонентов для отображения списка утвержденных аптек и новых аптек соответственно. У меня есть только набор аптек, и я хочу отобразить список утвержденных аптек на основе поля состояния (ie утверждено или нет) объектов аптеки. Поле состояния имеет тип boolean. Если поле состояния имеет значение true, объект аптеки будет отображаться в списке разрешенных аптек, в противном случае он будет скрыт. Проблема в том, что я хочу получить непрерывный индекс для видимых элементов и избежать индексации скрытых элементы. одобренные аптеки. html

 <tr  *ngFor="let pharmacy of newPharmacys;let i=index" >
        <ng-container *ngIf="pharmacy.status==false">
        <td (click)=navigateToPharmacy(pharmacy)>{{i+1}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.createdOn}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.name}}</td>
        <td (click)=navigateToPharmacy(pharmacy) >{{pharmacy.location}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.email}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.contact}}</td>
        <td (click)=navigateToPharmacy(pharmacy)><button type="button" class="btn btn-square btn-block btn-sm btn-primary" (click)="deleteFromDisabled(pharmacy)" (click)="addToEnabled(pharmacy)">approve</button></td>
        <td><label class="toggle-switch arya-3d toggle-primary">
            <input type="checkbox" class="toggle-input">
            <span class="toggle-slider"></span>
            </label>
        </td>
        </ng-container>
      </tr>

Здесь я хочу избежать индексации скрытых элементов. Как этого добиться?

Answer 1

Не думаю, что было бы хорошим решением делать манипуляции внутри шаблона. Шаблон используется для отображения содержимого, и мы должны избегать манипулирования данными внутри шаблона (HTML).

Было бы лучше, если вы отфильтруете свой набор данных внутри класса компонента и отобразите только необходимые данные. При этом вы можете эффективно выполнять манипуляции. Он также будет масштабируемым, если вы захотите выполнять больше манипуляций в будущем.

Я создал для вас экземпляр стекаблица - https://stackblitz.com/edit/angular-nhlfqm

Answer 2

Мы можем сделать это очень просто. Просто создайте функцию в файле component.ts

getActiveDataFromNewPharmacys():Array<any> {
    // type of status must be boolean
    return this.newPharmacys.filter(obj => obj.status);
}

И вызовите эту функцию в файле компонента. html для зацикливания следующим образом.

<tr  *ngFor="let pharmacy of getActiveDataFromNewPharmacys();let i=index" >

, тогда вы будете активны только продукты в html и принимают непрерывный индекс.

Дополнительная информация Лучше сделать функцию создания более обобщенной c.

getActiveDataFromArrayList:Array<any>):Array<any> {
    // type of status must be boolean
    return arrayList.filter(obj => obj.status);
}

Тогда эту функцию можно использовать повторно для любого объекта. Первая функция - это переменная зависимость.

Надеюсь, это поможет вам

.. Удачное кодирование ..