it-swarm.com.ru

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

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

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

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

21
Nicholas Fitton

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

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

Так:

<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>
39
Duncan

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

<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-директива

7
malbarmawi