Нельзя привязываться к 'ng-forOf', поскольку это не известное свойство

Ответ 1

Если вы используете альфа-52, просмотрите CHANGELOG.md в репозитории GitHub. Они изменили шаблон на регистр, который меньше ngFor вместо ng-for (аналогично для всех других директив)

Имена элементов, такие как <router-outlet>, не были изменены, но для совместимости с спецификациями специальных элементов, для которых требуется тире в имени тега для пользовательских элементов.

В >= RC.5 (и окончательном) ngFor и аналогичные директивы по умолчанию не являются окружающими. Они должны быть явно указаны как

@NgModule({
  imports: [CommonModule],

или если вы не возражаете, чтобы модуль был заблокирован только для браузера

@NgModule({
  imports: [BrowserModule],

BrowserModule экспортирует CommonModule, а также WorkerAppModule.

Обновление

BrowserModule должен быть импортирован в модуль приложения, в других модулях CommonModule должен быть импортирован.

Ответ 2

С Angular 2.1.0 +

Кажется, это одно и то же, за исключением того, что вы должны импортировать BrowserModule в свой модуль приложения и импортировать CommonModule в другие (вы не можете дважды импортировать BrowserModule с маршрутами lazy-load).

С Angular 2 rc5:

В этой версии представлены NgModules, вам нужно импортировать BrowserModule в свой модуль (модули), чтобы использовать ngFor и ngIf:

BrowserModule регистрирует поставщиков критически важных приложений. Он также включает в себя общие директивы, такие как NgIf и NgFor, которые сразу становятся видимыми и могут использоваться в любом из этих шаблонов компонентов модулей.

Пример:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [BrowserModule],
  providers: [],
  exports: [],
  declarations: []
})
export class MyModule { }

Ответ 3

В Angular2 beta ng-for неверно. он должен быть *ngFor.

Ответ 4

ngIf и ngFor объявлены в CommonModule из @angular/common.

CommonModule предоставляет множество общих директив, в которых нуждаются приложения, включая ngIf и ngFor.

BrowserModule импортирует CommonModule и реэкспортирует его. Чистый эффект заключается в том, что импортер BrowserModule автоматически получает директивы CommonModule.

обновите свой код, следуя

import { CommonModule } from '@angular/common';

@NgModule({
imports: [CommonModule]
})
// In HTML
<li *ngFor="let customer of customers">{{customer.name}}</tr>

для получения дополнительной информации Angular Модуль

Ответ 5

Синтаксис для директивы ngFor -

<tr *ngFor="let name of names">{{name}}</tr>

Обратите внимание, что больше не является именем имени, но позволяет назвать имена, а для ngFor требуется * и чувствителен к регистру.

Ответ 6

За другими ответами другая возможная причина заключается в том, что вы используете некоторый html formatter-repacker, который преобразует весь ваш HTML-компонент, включая шаблоны компонентов, в нижний регистр.

Подстановка шаблона Angular чувствительна к регистру для тегов ngFor и ngIf, по крайней мере сегодня, но я не могу сказать ничего точно на следующей неделе.

В частности, плагины webpack, например htmljs или html-minify, плохо работают, поскольку они конвертируют все в нижний регистр по умолчанию. Doublecheck HTML-код в скомпилированном тексте, он может быть со всеми строчными буквами (например, *ngif=...), который не будет принят, даже если в исходном исходном коде это правильно!

Конечно, он нарушает стандарт HTML5.

Это происходит потому, что наше самое замечательное развитие angular2 думает "они хотят более внимательно следить за html5" , но всегда есть некоторые удивительные исключения, что делает работу с angular2 всегда лучше и лучше.

Ответ 7

Это также может быть вызвано опечаткой. Я только столкнулся с этой проблемой, у меня было

<div class="row" *ngFor="let order or orders">

Как вы видите, пусть заказ или заказы вместо позволяют заказ заказов

Ответ 8

Будьте осторожны с опечаткой: это

*ngFor

• не нг-для
• не ngfor
• не нг-фор

Ответ 9

Учитывая, что он имел такой большой успех в другой проблеме, помеченной как дубликат этой, вот мой ответ, который получил много голосов:

Просто для тех, кому это не хватает, у меня также была проблема, когда я набирал ngif, а не ngIf (обратите внимание на заглавную букву 'I').

Ответ 10

Моя проблема была вызвана отсутствием экспорта компонента, содержащего * ngFor. Этот компонент (MyComponentWithNgFor) уже был импортирован и объявлен внутри моего SharedModule. SharedModule также импортировал Angular CommonModule, поэтому все выглядело хорошо.

Однако я использовал свой компонент с * ngFor в другом модуле - пусть назовем его ModuleB - который импортировал SharedModule, чтобы я мог использовать MyComponentWithNgFor.

Мое решение было просто добавить мой компонент, содержащий * ngFor, в мой экспортный массив SharedModule, например:

@NgModule({
  imports: [ CommonModule ],
  declarations: [ MyComponentWithNgFor ],
  exports: [ MyComponentWithNgFor ]
})
export class SharedModule { }

Это позволило моему ModuleB (который импортирует SharedModule) использовать MyComponentWithNgFor.

Ответ 11

Angular 8 Solution

Источник Ссылка

Как решить эту проблему?

Для решения этой проблемы нам нужно импортировать BrowserModule в почтовый модуль приложения, т.е. файл app.module.ts, а также импортировать CommonModule в дочерний модуль.

Поэтому после импорта наши файлы будут выглядеть следующим образом:

app.module.ts

    // app.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    ...
    ...

    @NgModule({
        imports: [
            BrowserModule,
            ....
            ....

child.module.ts

    // child.module.ts
    ...
    ...
    import { CommonModule } from '@angular/common';

    @NgModule({
      imports: [
        CommonModule
        ...
        ...