В Angular директива NgFor — это мощный инструмент для перебора коллекций и динамического рендеринга HTML-шаблонов. В сочетании с условными конвейерами он становится еще более универсальным, позволяя применять к данным различные операции фильтрации и преобразования перед рендерингом. В этой статье мы рассмотрим несколько методов использования директивы NgFor с условными каналами, приведя примеры кода для каждого подхода.

Метод 1: использование встроенного канала фильтрации
Среда Angular предоставляет встроенный канал фильтра, который можно использовать с NgFor для условного отображения элементов на основе определенных критериев. Вот пример:

<ul>
  <li *ngFor="let item of items | filter: 'condition'">{{ item }}</li>
</ul>

Метод 2: создание пользовательских каналов
Angular также позволяет создавать собственные каналы для выполнения более сложных операций фильтрации или преобразования. Вот пример пользовательского канала, который фильтрует элементы по условию:

@Pipe({ name: 'customFilter' })
export class CustomFilterPipe implements PipeTransform {
  transform(items: any[], condition: string): any[] {
    // Filtering logic goes here
    return filteredItems;
  }
}

<ul>
  <li *ngFor="let item of items | customFilter: 'condition'">{{ item }}</li>
</ul>

Метод 3: использование директивы NgIf внутри NgFor
Другой подход — объединить директиву NgFor с директивой NgIf для условной визуализации элементов на основе определенных условий. Вот пример:

<ul>
  <ng-container *ngFor="let item of items">
    <li *ngIf="item.condition">{{ item.name }}</li>
  </ng-container>
</ul>

Метод 4: фильтрация в классе компонентов
Вы также можете выполнять операции фильтрации непосредственно в классе компонентов и привязывать отфильтрованные элементы к NgFor. Вот пример:

export class MyComponent {
  items: any[];
  filteredItems: any[];
  constructor() {
    // Initialize items array
    this.filteredItems = this.items.filter(item => item.condition);
  }
}

<ul>
  <li *ngFor="let item of filteredItems">{{ item }}</li>
</ul>

В этой статье мы рассмотрели несколько методов использования директивы NgFor с условными каналами в Angular. Мы рассмотрели использование встроенного фильтра-канала, создание пользовательских каналов, объединение NgFor с NgIf и выполнение фильтрации в классе компонента. Каждый метод предоставляет разные подходы к фильтрации и преобразованию данных в зависимости от конкретных условий. Используя возможности NgFor и условных каналов, вы можете создавать динамические и интерактивные шаблоны в своих приложениях Angular.