Pengecualian sudut: Tidak dapat mengikat 'ngForIn' karena ini bukan properti asli yang dikenal

Apa yang saya lakukan salah?

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

Kesalahannya adalah

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

Karena ini setidaknya yang ketiga kalinya saya membuang lebih dari 5 menit untuk masalah ini, saya pikir saya akan memposting Q&A. Saya harap ini membantu orang lain di jalan ... mungkin saya!

Saya mengetik inalih-alih ofdalam ekspresi ngFor.

Sebelum 2-beta.17 , seharusnya:

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

Pada beta.17, gunakan letsintaks alih-alih #. Lihat UPDATE lebih jauh ke bawah untuk info lebih lanjut.

Perhatikan bahwa sintaks ngFor "desugars" menjadi sebagai berikut:

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

Jika kita gunakan insebagai gantinya, itu berubah menjadi

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

Karena ngForInbukan arahan atribut dengan properti input dengan nama yang sama (seperti ngIf), Angular kemudian mencoba untuk melihat apakah itu adalah properti (asli yang dikenal) dari templateelemen, dan itu bukan, maka kesalahannya.

UPDATE - per 2-beta.17, gunakan letsintaks sebagai ganti #. Ini pembaruan sebagai berikut:

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

Perhatikan bahwa sintaks ngFor "desugars" menjadi sebagai berikut:

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

Jika kita gunakan insebagai gantinya, itu berubah menjadi

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

TL; DR;

Gunakan biarkan ... bukannya bukannya ... masuk !!

Jika Anda baru untuk Sudut (> 2.x) dan mungkin bermigrasi dari Angular1.x, kemungkinan besar Anda membingungkan indengan of. Seperti yang disebutkan andreas dalam komentar di bawah ini, for ... ofiterasi values pada objek sementara for ... initerasi properties pada objek. Ini adalah fitur baru yang diperkenalkan di ES2015.

Cukup ganti:

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

dengan

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

Jadi, Anda harus mengganti indenganofngFor direktif di dalam untuk mendapatkan nilai.

Coba impor import { CommonModule } from '@angular/common';di sudut bersudut karena *ngFor, *ngIfsemuanya ada diCommonModule

Dalam kasus saya, WebStrom lengkapi-otomatis dimasukkan dengan huruf kecil *ngfor, bahkan ketika Anda memilih unta yang tepat ( *ngFor).

Masalah saya adalah, bahwa Visual Studio entah bagaimana secara otomatis diturunkan *ngFor ke *ngforpada copy & paste.

Ada alternatif jika Anda ingin menggunakan ofdan tidak beralih ke in. Anda dapat menggunakan yang KeyValuePipediperkenalkan di 6.1. Anda dapat dengan mudah beralih pada objek:

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

T: Tidak dapat mengikat ke 'pSelectableRow' karena ini bukan properti yang dikenal dari 'tr'.

A: Anda perlu mengkonfigurasi primeng tabulemodule di ngmodule

solusi saya adalah - hapus saja karakter '*' dari ekspresi ^ __ ^

<div ngFor="let talk in talks">