Angular - игнорировать элемент в NgFor

Question

Вопрос прост.

Я хочу перебрать элементы в списке. Но ... мне нужно сравнить, если некоторые значения были равны, в этом случае игнорирует этот элемент в l oop и продолжить. Код

 <li *ngFor="let secondary of location.contador.gateways" ngIf="location.contador.gateway != secondary.unidadVenta">{{secondary.TEST}}</li>

Как мы видим, я пытаюсь сравнить значения в ng Если, но не работает, как я ожидал.

Кто-нибудь знает правильный способ сделать это?

Answer 1

Используйте ng-container, чтобы обернуть вокруг тега <li>:

<ng-container *ngFor="let secondary of location.contador.gateways">
   <li *ngIf="location.contador.gateway != secondary.unidadVenta">
     {{secondary.TEST}}
   </li>
</ng-container>

Answer 2

В вашем component.ts вы можете сделать что-то подобное в хуке жизненного цикла или в любой функции:

this.location.contador.gateways = this.location.contador.gateways.filter((secondary) => {
 return location.contador.gateway != secondary.unidadVenta;
})

Если вы хотите отфильтровать свой шаблон, вы можете использовать вложенный тег внутри li tag:

<li *ngFor="let secondary of location.contador.gateways">
 <span *ngIf="location.contador.gateway != secondary.unidadVenta">
 {{secondary.TEST}}
 </span>
</li>

Вы должны использовать вложенный тег, потому что вы не можете использовать две структурные директивы (ngFor, ngIf) для одного тега.

ОБНОВЛЕНИЕ

Использование ng-контейнера лучше, потому что вам не нужно вводить ненужные теги только для цели использования *ngIf.

<ng-container *ngFor="let secondary of location.contador.gateways">
 <li *ngIf="location.contador.gateway != secondary.unidadVenta">
  {{secondary.TEST}}
 </li>
</ng-container>

См. это .