Angular io (4) * ng Для первого и последнего

Я пытаюсь определить, является ли элемент в *ngFor первым или последним элементом стиля контейнера. Есть ли способ сделать что-то подобное?

<md-expansion-panel *ngFor="let item of items" *ngClass="{ 'first' : item.isFirst }">
  <content></content>
</md-expansion-panel>

Спасибо за любую помощь!

Ответ 1

Внутри ngFor у вас есть доступ к нескольким переменным:

  • index: number: индекс текущего элемента в iterable.
  • first: boolean: True, когда элемент является первым элементом в iterable.
  • last: boolean: True, когда элемент является последним элементом в iterable.
  • even: boolean: True, когда элемент имеет равномерный индекс в iterable.
  • odd: boolean: True, когда элемент имеет нечетный индекс в iterable.

Итак:

<md-expansion-panel *ngFor="let item of items; first as isFirst"
    *ngClass="{ 'first' : isFirst }">
  <content></content>
</md-expansion-panel>

Документация на https://angular.io/api/common/NgForOf дает следующий пример:

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

Ответ 2

Вот как вы можете это сделать:

<md-expansion-panel *ngFor="let item of items; let first = first; 
      let last = last" *ngClass="{ 'first' : first }">
   <content></content>
 </md-expansion-panel>

NgFor предоставляет несколько экспортируемых значений, которые можно связать с локальными переменными:

  • index будет установлен на текущую итерацию цикла для каждого шаблона контекст, поэтому он начинается с 0.

  • first будет установлен в логическое значение, указывающее, является ли элемент первый в итерации.

  • last будет установлен в логическое значение, указывающее, является ли элемент последний в итерации.

  • even будет иметь логическое значение, указывающее, имеет ли этот элемент четный индекс.

  • odd будет иметь логическое значение, указывающее, имеет ли этот элемент нечетный индекс.

для получения дополнительной информации: NgFor-директива 🚀🚀