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

Я пытаюсь следовать основному Угловому 2 учебнику здесь:

https://angular.io/docs/js/latest/guide/displaying-data.html

Я могу получить угловое приложение для загрузки и отображения моего имени с помощью этого кода:

import { Component, View, bootstrap } from 'angular2/angular2'; @Component({ selector: "my-app" }) class AppComponent { myName: string; names: Array; constructor() { this.myName = "Neil"; } } bootstrap(AppComponent);

Однако, когда я пытаюсь добавить массив строк и попытаться отобразить их с помощью ng-for, это вызывает следующую ошибку:

 Can't bind to 'ng-forOf' since it isn't a known native property (" Friends:
  ]*ng-for="#name of names"> {{ name }} 
 "): [email protected]:16 Property binding ng-forOf not used by any directive on an embedded template (" Friends:
  [ERROR ->] {{ name }} 
 "): [email protected]:12

Вот код:

 import { Component, View, bootstrap } from 'angular2/angular2'; @Component({ selector: "my-app" }) @View({ template: ` My name: {{ myName }}
 Friends:
   {{ name }} 
 
 `, directives: [ NgFor ] }) class AppComponent { myName: string; names: Array; constructor() { this.myName = "Neil"; this.names = ["Tom", "Dick", "Harry"]; } } bootstrap(AppComponent);

Что мне не хватает?

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

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

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

 @NgModule({ imports: [CommonModule],

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

 @NgModule({ imports: [BrowserModule],

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

Обновить

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

С Angular 2.1.0+

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

С угловым 2 rc5:

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

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

пример:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [BrowserModule], providers: [], exports: [], declarations: [] }) export class MyModule { }

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

ngIf и ngFor объявляются в CommonModule из @ angle / common .

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

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

обновите свой код следующим образом

 import { CommonModule } from '@angular/common'; @NgModule({ imports: [CommonModule] }) // In HTML {{customer.name}}

для получения дополнительной информации Угловой модуль

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

 {{name}}

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

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

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

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

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

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

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

Как вы видите, есть возможность заказать заказ или заказы вместо заказа заказов

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

Только для тех, кто этого не хватает, у меня также была проблема, когда я набирал ngif, а не ngIf (обратите внимание на capitol ‘I’).

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