Для начала вы должны понять, что скобочная запись [] используется для привязки свойства в Angular.
Я буду использовать пример кода, который вы предоставили, чтобы помочь объяснить это:
<app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
В этом случае [hero] в [hero]="hero" является примером свойствапривязка, при которой данные будут перетекать в одну сторону из источника данных (компонента) в представление (HTML).Свойство hero, которое вы найдете, было определено как свойство ввода этого компонента с использованием @ Input decorator .
Что приводит нас к вашему вопросу:
Почему * ngFor не нужны скобки?
Ответ точночто ты думалВам не нужно использовать [скобки] для *ngFor из-за наличия звездочки (*).Звездочка - это угловая сокращенная запись (или синтетический сахар), которая позволяет разработчикам писать код чище, проще для понимания и сопровождения кода.Под этими листами, когда Angular-компилятор «десугирует» ваш код, он будет выглядеть примерно так:
<template [ngFor]="let hero of heroes">
<div></div>
</template>
Оттуда Angular-компилятор будет далее «десугарировать» ваш код примерно так:
<template ngFor let-hero="$implicit" [ngForOf]="heros">
<div>...</div>
</template>
Итак, в заключение вы можете видеть, что ngFor Structural Directive в конечном счете обрабатывается как любое другое свойство, которое требует привязки свойства.Тем не менее, из-за того, что Angular был встроенной директивой, мы получили гораздо более понятное использование сокращенных обозначений.В отличие от свойства hero, которое мы создали и определили сами, поэтому нам необходимо явно использовать скобочную запись в HTML.Не забывайте, хотя вы можете использовать обозначения в скобках со структурными директивами, вы должны всегда предпочитать звездочку .