Pengecualian: Tidak dapat mengikat ke 'ngFor' 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="talk of 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 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

Saya rindu letdi depan talk:

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

Perhatikan bahwa pada beta.17 penggunaan #...untuk mendeklarasikan variabel lokal di dalam arahan struktural seperti NgFor sudah ditinggalkan. Gunakan letsebagai gantinya.

<div *ngFor="#talk of talks"> sekarang menjadi <div *ngFor="let talk of talks">

Jawaban asli:

Saya rindu #di depan talk:

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

Sangat mudah untuk melupakannya #. Saya berharap pesan kesalahan pengecualian sudut gantinya akan mengatakan:
you forgot that # again.

Kesalahan ketik lain yang mengarah ke kesalahan OP dapat menggunakan in:

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

Anda sebaiknya menggunakan of:

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

Pernyataan ini digunakan dalam versi Angular2 Beta .....

Selanjutnya gunakan biarkan bukan #

biarkan kata kunci digunakan untuk mendeklarasikan variabel lokal

Dalam kasus saya, itu adalah surat kecil f. Saya membagikan jawaban ini hanya karena ini adalah hasil pertama di google

pastikan untuk menulis *ngFor

Di sudut 7 diperbaiki ini dengan menambahkan baris ini ke .module.tsfile:

import { CommonModule } from '@angular/common'; imports: [CommonModule]

Anda harus menggunakan kata kunci let untuk mendeklarasikan variabel lokal mis. * NgFor = "let talk of talk"

Bagi saya, untuk mempersingkat cerita, saya secara tidak sengaja diturunkan ke angular-beta-16.

Sintaks let ... HANYA valid dalam 2.0.0-beta.17 +

Jika Anda mencoba membiarkan sintaks pada apa pun di bawah versi ini. Anda akan menghasilkan kesalahan ini.

Tingkatkan ke angular-beta-17 atau gunakan #item dalam sintaksis item.

Dalam kasus saya, saya membuat kesalahan dengan menyalin *ng-for=dari dokumen.

https://angular.io/guide/user-input

Koreksi saya jika saya salah. Tetapi tampaknya *ng-for=telah diubah menjadi*ngFor=

Saya lupa membubuhi keterangan komponen saya dengan " @Input " (Doh!)

book-list.component.html (Kode yang menyinggung):

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

Versi buku-item.component.ts yang diperbaiki :

import { Component, OnInit, Input } from '@angular/core';

import { Book } from '../model/book';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

  @Input()
  public book: Book;

  constructor(private bookService: BookService)  { }

  ngOnInit() {}

}

Juga jangan mencoba menggunakan TypeScript murni dalam ini ... Saya ingin lebih berhubungan dengan forpenggunaan dan penggunaan*ngFor="const filter of filters" dan mendapatkan ngFor bukan kesalahan properti yang dikenal. Hanya mengganti const dengan let berfungsi.

Seperti @ alexander-abakumov berkata untuk ofdigantikan oleh in.

Dalam kasus saya, modul yang berisi komponen menggunakan * ngFor mengakibatkan kesalahan ini, tidak termasuk dalam app.module.ts. Termasuk di sana di array impor menyelesaikan masalah untuk saya.

Hanya untuk menutupi satu kasus ketika saya mendapatkan error yang sama dan alasan menggunakan di bukannya dari dalam iterator

Cara yang salah let file in files

Jalan yang benar let file of files

Gunakan ini

<div *ngFor="let talk of talks> 
   {{talk.title}} 
   {{talk.speaker}}
   <p>{{talk.description}} 
</div>

Anda perlu menentukan variabel untuk beralih di atas larik objek