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

Question

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

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

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

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

Ошибка: Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: неожиданный токен var в столбце 1 в [var fruit of fruits] в ng:///AppModule/AppComponent.html@4:4 ("("

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

Answer 1

Выражение, которое вы вводите здесь, на самом деле не javascript (или машинопись), а угловое выражение.

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

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

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

Смотрите https://toddmotto.com/angular-ngfor-template-element

Answer 2

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

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

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

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

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

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

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