Почему нельзя использовать var вместо let in ngFor

В соответствии с моими знаниями мы используем var и let для объявлений переменных в javascript, с той лишь разницей, что var получает область видимости текущей функции, а let получает область действия к текущему блоку. Поэтому он должен работать, если я использую var вместо let где угодно. Но в приведенном ниже коде...

<li *ngFor="let fruit of fruits">
   {{ fruit}}
</li>

... если я использую var, он дает ошибку.

<li *ngFor="var fruit of fruits">
   {{ fruit}}
</li>

Ошибка: Неподготовлено (в обещании): Ошибка: ошибки анализа шаблона: Parser Ошибка: Неожиданный токен var в столбце 1 в [var fruit of fruits] в ng:///AppModule/[email protected]: 4 ("

Может кто-нибудь сказать мне, почему это происходит?

Ответ 1

Выражение, которое вы вводите здесь, на самом деле не javascript (или typescript), а выражение angular.

Здесь вы можете сделать другие вещи, которые невозможны в JS или TS, например, используя каналы (*ngFor="contacts | async").

Под капотом это просто синтаксический сахар для чего-то вроде этого:

 <ng-template ngFor let-contact [ngForOf]="contacts | async">

См. https://toddmotto.com/angular-ngfor-template-element#ngfor-and-ng-template

Ответ 2

Добавление некоторых деталей к предыдущему ответу. Я получил некоторое объяснение использования let с *ngFor в документации angular

Ссылка https://angular.io/guide/template-syntax#ngfor

Текст, назначенный * ngFor, является инструкцией, которая повторителя.

* ngFor microsyntax Строка, назначенная * ngFor, не является выражением шаблона. Это микросинтекс - маленький собственный язык, который angular интерпретирует. Строка "let hero of heroes" означает:

Возьмите каждого героя в массиве героев, сохраните его в локальном цикле героев переменной и сделать ее доступной для шаблона HTML для каждого итерации.

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

Ключевое слово let перед тем, как герой создает переменную ввода шаблона, называемую герой. Директива ngFor выполняет итерацию по массиву героев, возвращаемому свойство героев родительских компонентов и присваивает герою текущий элемент из массива во время каждой итерации.