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

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