it-swarm.com.ru

Фильтрация элементов по значению внутри ngFor без записи Pipes

У меня есть следующий компонент:

class MyComponent {
  public mode = 'v';
  readonly modes = ['v', 'a', 'd'];
  ....
}

Теперь я хочу использовать ngFor для отображения кнопок для всех режимов в modes, кроме текущего режима, хранящегося в mode. У меня есть следующий код:

<button *ngFor="let othermode of modes">
  {{ othermode }}
</button>

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

<button *ngFor="let othermode of modes.filter(elem => elem !== this.mode)">
  {{ othermode }}
</button>

но это не работает. Все вопросы, которые я видел, требовали написать собственный канал для этой функции, но нет ли простого способа фильтрации массива строк, используя только значения?

6
Dane

Ты можешь использовать :

<ng-container *ngFor="let othermode of modes">
  <button *ngIf="othermode!=mode">
    {{ othermode }}
  </button>
</ng-container>
3
Vivek Doshi

Используйте функцию фильтра для фильтрации данных:

filterFunction(your_collection): any[] {  
    return your_collection.filter(i => i.field.value === filterKey);
}

и в шаблоне:

*ngFor="let value of filterFunction(datasource)"

Или используйте существующий компонент. Смотрите тему:

https://stackoverflow.com/a/50071762/4332063

8
Wedson Quintanilha da Silva

Используйте ng-template с ngIf, если вы хотите перебрать массив с условием . Ниже приведен пример кода. Вы можете найти рабочую версию здесь

<ng-template ngFor let-othermode [ngForOf]="modes">
<button *ngIf="othermode!=mode">
  {{ othermode }}
</button>
</ng-template>
0
Prithivi Raj