Açısal istisna: Bilinen bir yerel özellik olmadığından 'ngForIn'e bağlanamıyor

Neyi yanlış yapıyorum?

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, [])

Hata:

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">

Bu en az üçüncü kez bu sorun üzerinde 5 dakikadan fazla boşa harcadım çünkü ben Q & A sonrası anladım. Umarım yolda başka birine yardımcı olur ... muhtemelen bana!

Ben daktilo inyerine ofngFor ifadesinde.

2-beta.17 için , şöyle olmalıdır:

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

Beta.17'den itibaren letyerine sözdizimini kullanın #. Daha fazla bilgi için GÜNCELLEME bölümüne bakın.

NgFor sözdiziminin aşağıdakileri içerdiğini unutmayın:

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

Kullandığımız takdirde inbunun yerine, dönüşür

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

Yana ngForIn(gibi aynı adı taşıyan bir giriş özelliğiyle bir özellik yönergesi değildir ngIf), Açısal o zaman bir (bilinen yerli) özelliği olup olmadığını görmek için çalışır templateelemanı ve dolayısıyla hata değildir.

GÜNCELLEME - 2-beta.17'den itibaren letyerine sözdizimini kullanın #. Bu aşağıdakilere güncellenir:

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

NgFor sözdiziminin aşağıdakileri içerdiğini unutmayın:

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

Kullandığımız takdirde inbunun yerine, dönüşür

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

TL; DR;

Kullanım ait ... let yerine de ... let !!

Eğer Açısal (> 2.x) yeni ve muhtemelen Angular1.x geçiş iseniz, büyük olasılıkla karıştırıyorsun inile of. Andreas Aşağıdaki yorumlardan bahsettiniz for ... ofüzerinde dolaşır values arasında ise bir nesnenin for ... indolaşır üzerinde properties de bir nesne. Bu, ES2015'te sunulan yeni bir özelliktir.

Değiştirin:

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

ile

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

Bu nedenle, değerleri almak için iç yönerge ile değiştirmelisinizinofngFor .

İthalat için deneyin import { CommonModule } from '@angular/common';olarak açısal finalinde *ngFor, *ngIftüm mevcut olanCommonModule

Benim durumumda, WebStrom otomatik tamamlama *ngfor, sağ deve kasalı birini ( *ngFor) seçmiş gibi görünseniz bile, küçük harflerle eklenmiştir .

Benim sorunum, Visual Studio bir şekilde otomatik olarak kopyala & yapıştır üzerine küçük harf *ngFor oldu *ngfor.

Kullanmak ofve geçmek istemiyorsanız bir alternatif var in. KeyValuePipe6.1'de sunulan kullanabilirsiniz . Bir nesne üzerinde kolayca yineleme yapabilirsiniz:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

S: Bilinen bir 'tr' özelliği olmadığı için 'pSelectableRow' öğesine bağlanamıyor.

A: ngmodule içinde primeng tabulemodule yapılandırmanız gerekir

benim çözümüm - sadece '*' karakterini ^ __ ^ ifadesinden kaldırın

<div ngFor="let talk in talks">