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


355

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

3
cobalah untuk mengubah ini <div * ngFor = "biarkan bicara dalam pembicaraan"> ke ini <div * ngFor = "biarkan pembicaraan pembicaraan"> perhatikan: "dalam" menjadi "dari"
Ishimwe Aubain Consolateur

Saya kira Anda berasal dari latar belakang C # / Java, saya melakukan kesalahan yang sama dalam menggunakan alih-alih
Abhay Dhar

Jawaban:


701

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>

7
Dan ya, ingat itu #sebelum talkvariabel (seperti Anda mengatakan: "Harapan itu membantu orang lain di jalan ... mungkin saya!")
Nobita

2
@Nobita, ya, yang telah sering membuat saya tersandung. Saya menulis Q&A untuk itu juga: stackoverflow.com/questions/34012291/...
Mark Rajcok

2
begitu menyengat jelas ketika Anda menyadari ... Saya merasa itu sangat berlawanan dengan intuisi, sangat terbiasa dengan gaya in-in. Saya akan memilih kedua posting T&J Anda lebih banyak jika saya bisa, terima kasih
Pete

1
Mark terima kasih. Ini bukan pesan kesalahan terbesar - seperti WTF yang berarti "ngForIn" !? Tapi kalau dipikir-pikir, ya! Saya bergumul dengan ini selama 20 menit sebelum saya menemukan T&J Anda.
Metodologi

2
Saya setuju bahwa jawabannya harus memiliki keduanya. Tetapi saya lebih lanjut memperbarui jawaban untuk membuatnya lebih jelas bahwa post beta.17 sintaksnya berbeda. (Aku berhenti bertukar sehingga yang terbaru adalah yang pertama). Sebagai gantinya saya hanya memasukkan catatan kecil. Sekilas, seorang pendatang baru mungkin tidak menyadari sintaksis terbaru. Ini perubahan kecil tetapi membuat perbedaan besar
redfox05

288

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.


2
Sebagai tambahan - apakah ada yang tahu alasan di balik penggunaan "dari", "dalam" tampaknya merupakan pilihan yang lebih alami di sini.
Morvael

2
@mamsoudi @Morvael Perbedaannya adalah bahwa for..initerates kunci / properti objek sementara for...ofiterates nilai-nilai objek. for(prop in foo) {}sama dengan for(prop of Object.keys(foo)) {}. Ini adalah fitur bahasa baru dari ECMA Script 2015 / ES6. Jadi ini hanya masalah Angular jarak jauh.
Andreas Baumgart

inilah yang terjadi ketika Anda telah mengkode dalam C # selama bertahun-tahun dan kemudian beralih ke sudut
SamuraiJack

solusi berfungsi dengan benar, terima kasih
tanpa satu

13

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


Saya pikir jawaban ini akan menjadi alasan yang lebih umum saat ini untuk mendapatkan kesalahan dalam judul OP.
G. Stoynev

11

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


6

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


1

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>

-3

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

A: Anda perlu mengkonfigurasi primeng tabulemodule di ngmodule


-15

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

<div ngFor="let talk in talks">
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.