В этом руководстве вы узнаете о директиве ngFor на примере в Angular 6.

Вы узнаете об этих концепциях:

  • Что ngFor и для чего используется,
  • Как использовать trackBy с ngFor,
  • Как получить индекс в ngFor

Приступим!

Для чего ngFor используется?

ngFor - это директива, которую вы можете использовать в своих шаблонах Angular для просмотра списков и массивов данных для их отображения.

Предположим, у нас есть компонент Angular 6 со следующим массивом данных:

policies: [] = [ {id: 0, name: "policy001"}, {id: 2, name: "policy002"}, {id: 3, name: "policy003"}, {id: 4, name: "policy004"}, {id: 5, name: "policy005"}, ];

В шаблоне вы можете отображать свои политики в виде таблицы HTML с помощью директивы ngFor. Например, это пример шаблона:

<table> <thead> <th># Policy ID</th> <th>Policy name</th> </thead> <tbody> <tr *ngFor="let policy of policies"> <td>{{policy.id}}</td> <td>{{policy.name}}</td> </tr> </tbody> </table>

Это пример полного компонента Angular с шаблоном:

@Component({ selector:'policy-list', template: ` <table> <thead> <th># Policy ID</th> <th>Policy name</th> </thead> <tbody> <tr *ngFor="let policy of policies"> <td>{{policy.id}}</td> <td>{{policy.name}}</td> </tr> </tbody> </table> ` }) export class PolicyListComponent { policies: [] = [ {id: 0, name: "policy001"}, {id: 2, name: "policy002"}, {id: 3, name: "policy003"}, {id: 4, name: "policy004"}, {id: 5, name: "policy005"}, ]; }

Вы просто передаете ngFor выражение в let ELEMENT of YOUR_ARRAY. ELEMENT - это переменная, которая ссылается на элемент массива, доступ к которой осуществляется внутри цикла. YOUR_ARRAY относится к массиву, объявленному в соответствующем компоненте.

Ключевые слова let и of являются обязательными в выражении ngFor.

Как найти индекс текущего элемента в цикле ngFor

Во многих сценариях вам необходимо знать индекс текущего элемента внутри цикла ngFor.

Вы можете просто использовать ключевое слово index. Например:

<tr *ngFor="let policy of policies; let i = index"> <td>Index: {{i}}</td> <td>{{policy.name}}</td> </tr>

Как видите, мы просто добавляем еще одно выражение - let i = index, которое присваивает индекс переменной i.

Получение первого и последнего элементов внутри цикла ngFor

Вы также получаете доступ к первому и последнему элементам вашего ngFor цикла, используя две переменные first и last. Например:

<tr *ngFor="let policy of policies; let first = first; let last = last"> <td></td> </tr>

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

Первоначально опубликовано на www.techiediaries.com.