Skip to main content

Що таке let- синтаксис у шаблоні?

AngularJunior~1 хв читання
Запропонувати правку

В Angular let-синтаксис у шаблоні використовується для оголошення локальних змінних всередині структурних директив (*ngFor, *ngIf, ng-template), щоб працювати з даними або станом на рівні шаблону.

Основні моменти

  1. У *ngFor - створює змінну для поточного елемента ітерації:
html
<li *ngFor="let item of items">{{ item.name }}</li>
  • item - локальна змінна, що представляє поточний елемент масиву items.
  1. Додаткові локальні змінні в *ngFor:
html
<li *ngFor="let item of items; let i = index; let isFirst = first"> {{ i }} - {{ item.name }} (Перший: {{ isFirst }}) </li>
  • i - індекс елемента, isFirst - true для першого елемента.
  1. У ng-template - дозволяє передавати значення з контексту:
html
<ng-template #tpl let-name="userName"> <p>{{ name }}</p> </ng-template>
  • let-name="userName" - оголошує локальну змінну name, яка бере значення з контексту userName.

Тобто let у шаблоні - це спосіб створювати локальні змінні для зручного доступу до даних і контексту всередині директив та шаблонів, без зміни класу компонента.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку