В этом руководстве вы узнаете о директиве 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.