İstisna: Bilinen bir yerel özellik olmadığı için 'ngFor' kaynağına bağlanamıyor

Neyi yanlış yapıyorum?

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

Hata:

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

Kaçırdığım letönünde talk:

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

Bu Not beta.17 olarak kullanımına #...içinde NgFor gibi yapısal yönergelerinin lokal değişkenler bildirmek kaldırılmıştır. letBunun yerine kullanın .

<div *ngFor="#talk of talks"> şimdi olur <div *ngFor="let talk of talks">

Orijinal cevap:

Kaçırdığım #önünde talk:

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

Bunu unutmak çok kolay #. Ben Açısal durum hata iletisi yerine söylemek isterdim:
you forgot that # again.

OP'nin hatasına yol açan başka bir yazım hatası şunlar olabilir in:

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

Bunun ofyerine şunları kullanmalısınız :

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

Bu Açıklama Angular2 Beta sürümünde kullanılır .....

Bundan böyle # yerine izin ver

let anahtar kelimesi yerel değişkeni bildirmek için kullanılır

Benim durumumda, küçük bir harfti f. Bu cevabı sadece Google'daki ilk sonuç olduğu için paylaşıyorum

yazdığınızdan emin olun *ngFor

Açısal 7'de .module.tsdosyaya şu satırları ekleyerek bu sorunu çözdüm:

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

Yerel değişkenleri bildirmek için let anahtar sözcüğünü kullanmalısınız, örneğin * ngFor = "görüşmelerden bahsedelim"

Benim için uzun bir hikayeyi kısaltmak için, yanlışlıkla açısal-beta-16'ya düştüm.

Let ... sözdizimi SADECE 2.0.0-beta.17 + için geçerlidir

Bu sürümün altındaki herhangi bir şeye izin ver sözdizimini denerseniz. Bu hatayı oluşturacaksınız.

Açısal beta-17'ye yükseltin veya öğeler sözdizimindeki # öğeyi kullanın.

Benim durumumda kopyalama hatası yaptım *ng-for= dokümanlardan .

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

Eğer Yanlışsam beni düzelt. Ama görünüyor *ng-for=olarak değiştirildi*ngFor=

Bileşenime " @Input " (Doh!) İle açıklama eklemeyi unuttum

book-list.component.html ( Sorunlu kod):

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

Book-item.component.ts dosyasının düzeltilmiş sürümü :

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() {}

}

Ayrıca bu saf TypeScript kullanmaya çalışmayın ... Ben daha fazla forkullanım ve kullanım karşılık istedim *ngFor="const filter of filters"ve ngFor bilinen bir özellik hatası var. Sadece const yerine let ile değiştirmek çalışıyor.

@ Alexander-abakumov ofyerine dedi in.

Benim durumumda, bu hatayla sonuçlanan * ngFor bileşenini kullanan bileşeni içeren modül, app.module.ts dosyasına dahil edilmedi. Ithalat dizisine orada dahil etmek benim için sorunu çözdü.

Sadece aynı hata almaya ve nedeni kullanıyordum bir dava daha kapsayacak şekilde de yerine ait Yineleyici içinde

Yanlış yol let file in files

Doğru yol let file of files

Bunu kullan

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

Bir nesne dizisi üzerinde yineleme yapmak için değişken belirtmeniz gerekir