Что я делаю неправильно?
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `<div *ngFor="let talk in talks">
{{talk.title}} by {{talk.speaker}}
<p>{{talk.description}}
</div>`
})
class ConfTalks {
talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
{title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
selector: 'my-app',
directives: [ConfTalks],
template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])
Ошибка
EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
angular
angular2-directives
Марк Райкок
источник
источник
Ответы:
Так как это уже третий раз, когда я потратил больше 5 минут на эту проблему, я решил опубликовать вопросы и ответы. Я надеюсь, что это поможет кому-то еще в будущем ... возможно, мне!
Я набрал
in
вместоof
выражения ngFor.Для 2-бета.17 это должно быть:
Начиная с бета.17, используйте
let
синтаксис вместо#
. Смотрите ОБНОВЛЕНИЕ ниже для получения дополнительной информации.Обратите внимание, что синтаксис ngFor "desugars" в следующем:
Если мы используем
in
вместо этого, он превращается вТак
ngForIn
как не является директивой атрибута с входным свойством с тем же именем (напримерngIf
), Angular пытается выяснить, является ли оно (известным собственным) свойствомtemplate
элемента, и это не так, следовательно, ошибка.ОБНОВЛЕНИЕ - начиная с 2-бета.17, используйте
let
синтаксис вместо#
. Это обновляет следующее:Обратите внимание, что синтаксис ngFor "desugars" в следующем:
Если мы используем
in
вместо этого, он превращается висточник
#
передtalk
переменной (как ваш сказал: «Надеюсь , что это помогает кто - то вниз по дороге ... наверное меня!»)TL; DR;
Используйте let ... of вместо let ... in !!
Если вы новичок в угловом (> 2.x) и , возможно , мигрирующие из Angular1.x, скорее всего , ты путаешь
in
сof
. Как андреас упомянул в комментариях нижеfor ... of
перебираетvalues
от объекта , аfor ... in
перебираетproperties
в объекте. Это новая функция, представленная в ES2015.Просто замените:
с
Таким образом, вы должны заменить
in
сof
внутреннейngFor
директивой для получения значений.источник
for..in
ключи / свойстваfor...of
объекта, в то время как итерирует значения объекта.for(prop in foo) {}
так же, какfor(prop of Object.keys(foo)) {}
. Это новая языковая функция ECMA Script 2015 / ES6. Так что это только отдаленно угловая проблема.Попробуйте импортировать
import { CommonModule } from '@angular/common';
в угловой финал, так как*ngFor
,*ngIf
все присутствуют вCommonModule
источник
В моем случае WebStrom автоматически завершает вставку в нижнем регистре
*ngfor
, даже если кажется, что вы выбрали правильный вариант в верблюде (*ngFor
).источник
Моя проблема была, что Visual Studio как - то автоматически строчными
*ngFor
, чтобы*ngfor
на копии и пасты.источник
Есть альтернатива, если вы хотите использовать,
of
а не переключаться наin
. Вы можете использоватьKeyValuePipe
введенный в 6.1. Вы можете легко перебрать объект:источник
Q: Невозможно привязать к pSelectableRow, так как это не известное свойство tr.
A: вам нужно настроить основной модуль в ngmodule
источник
мое решение было - просто удалите символ '*' из выражения ^ __ ^
источник