Co ja robię źle?
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, [])
Błąd jest
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
Mark Rajcok
źródło
źródło
Odpowiedzi:
Ponieważ jest to co najmniej trzeci raz, gdy zmarnowałem ponad 5 minut na ten problem, pomyślałem, że opublikuję pytania i odpowiedzi. Mam nadzieję, że pomoże to komuś innemu w drodze ... prawdopodobnie mnie!
Wpisałem
in
zamiastof
w wyrażeniu ngFor.Przed 2-beta.17 powinno to być:
Od wersji beta.17 użyj
let
składni zamiast#
. Zobacz AKTUALIZACJĘ w dół, aby uzyskać więcej informacji.Zauważ, że składnia ngFor „desugars” jest następująca:
Jeśli użyjemy
in
zamiast tego, zamienia się wPonieważ
ngForIn
nie jest dyrektywą atrybutową z właściwością wejściową o tej samej nazwie (jakngIf
), Angular próbuje następnie sprawdzić, czy jest (znaną natywną) właściwościątemplate
elementu, i nie jest, stąd błąd.AKTUALIZACJA - od 2-beta.17 użyj
let
składni zamiast#
. To aktualizuje następujące:Zauważ, że składnia ngFor „desugars” jest następująca:
Jeśli użyjemy
in
zamiast tego, zamienia się wźródło
#
poprzedniejtalk
zmiennej (jak powiedziałeś: „mam nadzieję, że pomoże to komuś innemu w drodze ... prawdopodobnie mnie!”)TL; DR;
Użyj let ... zamiast zamiast wpuścić ... !!
Jeśli jesteś nowym kątowe (> 2.x) i ewentualnie migracji z Angular1.x, najprawdopodobniej jesteś mylące
in
zof
. Andreas wspomniał w komentarzach poniżejfor ... of
iterujevalues
od obiektu podczasfor ... in
iterujeproperties
w obiekcie. Jest to nowa funkcja wprowadzona w ES2015.Wystarczy wymienić:
z
Musisz więc zastąpić
in
jąof
wewnętrznąngFor
dyrektywą, aby uzyskać wartości.źródło
for..in
iteruje klucze / właściwości obiektu, podczas gdyfor...of
iteruje wartości obiektu.for(prop in foo) {}
jest taki sam jakfor(prop of Object.keys(foo)) {}
. To nowa funkcja językowa skryptu ECMA 2015 / ES6. Jest to więc zdalnie problem Angular.Próba importu
import { CommonModule } from '@angular/common';
kątowego końcowa,*ngFor
,*ngIf
wszystkie są obecne wCommonModule
źródło
W moim przypadku WebStrom automatycznie uzupełnia wstawiony małymi literami
*ngfor
, nawet jeśli wygląda na to, że wybierasz właściwy wielbłąd wielkoformatowy (*ngFor
).źródło
Moim problemem było to, że Visual Studio jakoś automatycznie małe litery
*ngFor
, aby*ngfor
na kopiowanie i wklejanie.źródło
Istnieje alternatywa, jeśli chcesz używać,
of
a nie przełączać się nain
. Możesz użyćKeyValuePipe
wprowadzonego w 6.1. Możesz łatwo iterować po obiekcie:źródło
P: Nie można powiązać z „pSelectableRow”, ponieważ nie jest to znana właściwość „tr”.
Odp .: Musisz skonfigurować moduł podstawowy w ngmodule
źródło
moim rozwiązaniem było - wystarczy usunąć znak „*” z wyrażenia ^ __ ^
źródło