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

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">

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>

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ć injąof wewnętrzną ngFordyrektywą, aby uzyskać wartości.

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

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

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

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>

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

Odp .: Musisz skonfigurować moduł podstawowy w ngmodule

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

<div ngFor="let talk in talks">