Wyjątek: nie można powiązać z „ngFor”, ponieważ nie jest to znana właściwość natywna

Co ja robię źle?

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

Błąd jest

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

Brakowało mi letprzed talk:

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

Zauważ, że od wersji beta.17 użycie #...deklaracji zmiennych lokalnych w dyrektywach strukturalnych takich jak NgFor jest przestarzałe. Użyj letzamiast tego.

<div *ngFor="#talk of talks"> teraz staje się <div *ngFor="let talk of talks">

Oryginalna odpowiedź:

Brakowało mi #przed talk:

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

Tak łatwo o tym zapomnieć #. Życzę kątowego komunikat wyjątek zamiast powiedzieć:
you forgot that # again.

Inną literówką prowadzącą do błędu OP może być użycie in:

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

Zamiast tego powinieneś użyć of:

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

To oświadczenie używane w wersji Angular2 Beta .....

Odtąd używaj let zamiast #

słowo kluczowe let służy do deklarowania zmiennej lokalnej

W moim przypadku był to mały list f. Dzielę się tą odpowiedzią tylko dlatego, że jest to pierwszy wynik w Google

pamiętaj, aby napisać *ngFor

W Angular 7 naprawiłem to, dodając następujące wiersze do .module.tspliku:

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

Powinieneś użyć słowa kluczowego let do deklarowania zmiennych lokalnych, np. * NgFor = "let talks talks"

Krótko mówiąc, dla mnie niechcący obniżyłem wersję beta-16.

Składnia let ... obowiązuje TYLKO w wersji 2.0.0-beta.17 +

Jeśli wypróbujesz składnię let na cokolwiek poniżej tej wersji. Wygenerujesz ten błąd.

Uaktualnij do wersji kątowej-beta-17 lub użyj # elementu w składni przedmiotów.

W moim przypadku popełniłem błąd kopiowania *ng-for=z dokumentów.

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

Popraw mnie, jeśli się mylę. Ale wygląda na to, że *ng-for=został zmieniony na*ngFor=

Zapomniałem dodać adnotacji do mojego komponentu za pomocą „ @Input ” (Doh!)

book-list.component.html (Kod obrażający):

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

Poprawiona wersja book-item.component.ts :

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

}

Również nie próbuj używać czystego TypeScript w tym ... Chciałem bardziej odpowiadać forużyciu i użyciu *ngFor="const filter of filters"i dostałem ngFor nie znany błąd właściwości. Działa tylko zastąpienie const przez let.

Jak powiedział @ Alexander-abakumov dla ofzastąpionych przez in.

W moim przypadku moduł zawierający komponent używający * ngFor powodujący ten błąd nie został uwzględniony w app.module.ts. Umieszczenie go w tablicy importu rozwiązało problem.

Wystarczy pokryć jeszcze jeden przypadek, kiedy otrzymuję ten sam błąd i powód używał w zamiast od w iterator

Zła droga let file in files

Właściwa droga let file of files

Użyj tego

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

Musisz podać zmienną, aby iterować po tablicy obiektu