Wyjątek kątowy: nie można powiązać z „ngForIn”, ponieważ nie jest to znana właściwość natywna

354

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">
Mark Rajcok
źródło
3
spróbuj zmienić to <div * ngFor = "let talk in talks"> na <div * ngFor = "let talk of talks"> uwaga: „in” na „of”
Ishimwe Aubain Consolateur
Wydaje mi się, że pochodzisz z języka C # / Java, popełniłem ten sam błąd, używając zamiast
Abhay Dhar

Odpowiedzi:

698

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 inzamiast ofw wyrażeniu ngFor.

Przed 2-beta.17 powinno to być:

<div *ngFor="#talk of talks">

Od wersji beta.17 użyj letskładni zamiast #. Zobacz AKTUALIZACJĘ w dół, aby uzyskać więcej informacji.


Zauważ, że składnia ngFor „desugars” jest następująca:

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

Jeśli użyjemy inzamiast tego, zamienia się w

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

Ponieważ ngForInnie jest dyrektywą atrybutową z właściwością wejściową o tej samej nazwie (jak ngIf), Angular próbuje następnie sprawdzić, czy jest (znaną natywną) właściwością templateelementu, i nie jest, stąd błąd.

AKTUALIZACJA - od 2-beta.17 użyj letskładni zamiast #. To aktualizuje następujące:

<div *ngFor="let talk of talks">

Zauważ, że składnia ngFor „desugars” jest następująca:

<template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

Jeśli użyjemy inzamiast tego, zamienia się w

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
Mark Rajcok
źródło
7
I tak, pamiętaj o #poprzedniej talkzmiennej (jak powiedziałeś: „mam nadzieję, że pomoże to komuś innemu w drodze ... prawdopodobnie mnie!”)
Nobita,
2
@Nobita, tak, ten sam często mnie potykał. Napisałem też
pytanie
2
tak śmierdząco oczywiste, kiedy zdajesz sobie sprawę ... Uważam, że to naprawdę sprzeczne z intuicją, więc przyzwyczaiłem się do stylu. Głosowałbym więcej na wasze posty z pytaniami i odpowiedziami więcej, gdybym mógł, dzięki
Pete
1
Dzięki Mark. To nie jest największy komunikat o błędzie - tak jak WTF ma oznaczać „ngForIn” !? Ale z perspektywy czasu! Zmagałem się z tym przez około 20 minut, zanim znalazłem twoje pytania i odpowiedzi.
metodolog
2
Zgadzam się, że odpowiedź powinna zawierać jedno i drugie. Ale dalej zaktualizowałem odpowiedź, aby wyjaśnić, że po wersji beta.17 składnia jest inna. (Przestałem się zamieniać, więc najnowszy jest pierwszy). Zamiast tego po prostu dodałem małą notatkę. Na pierwszy rzut oka nowicjusz może nie zrozumieć najnowszej składni. To niewielka zmiana, ale robi dużą różnicę
redfox05
287

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 inz of. Andreas wspomniał w komentarzach poniżej for ... ofiteruje values od obiektu podczas for ... initeruje properties w obiekcie. Jest to nowa funkcja wprowadzona w ES2015.

Wystarczy wymienić:

<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

z

<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

Musisz więc zastąpić inof wewnętrzną ngFordyrektywą, aby uzyskać wartości.

mamsoudi
źródło
2
Na marginesie - czy ktoś zna powód użycia słowa „z”, „w” wydaje się tutaj bardziej naturalnym wyborem.
Morvael
2
@mamsoudi @Morvael Różnica polega na tym, że for..initeruje klucze / właściwości obiektu, podczas gdy for...ofiteruje wartości obiektu. for(prop in foo) {}jest taki sam jak for(prop of Object.keys(foo)) {}. To nowa funkcja językowa skryptu ECMA 2015 / ES6. Jest to więc zdalnie problem Angular.
Andreas Baumgart
tak się dzieje, gdy
kodujesz
rozwiązania działa poprawnie, dzięki
bez
13

Próba importu import { CommonModule } from '@angular/common';kątowego końcowa, *ngFor, *ngIfwszystkie są obecne wCommonModule

Rohitesh
źródło
Sądzę, że ta odpowiedź byłaby obecnie najczęstszym powodem otrzymania błędu w tytule OP.
G. Stoynev,
11

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).

Eran Shabi
źródło
6

Moim problemem było to, że Visual Studio jakoś automatycznie małe litery *ngFor , aby *ngforna kopiowanie i wklejanie.

Tomino
źródło
1

Istnieje alternatywa, jeśli chcesz używać, ofa nie przełączać się na in. Możesz użyć KeyValuePipewprowadzonego w 6.1. Możesz łatwo iterować po obiekcie:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>
सत्यमेव जयते
źródło
-3

P: Nie można powiązać z „pSelectableRow”, ponieważ nie jest to znana właściwość „tr”.

Odp .: Musisz skonfigurować moduł podstawowy w ngmodule

użytkownik9838309
źródło
-15

moim rozwiązaniem było - wystarczy usunąć znak „*” z wyrażenia ^ __ ^

<div ngFor="let talk in talks">
Unkas
źródło