wake-up-neo.com

Ausnahme: Kann nicht an 'ngFor' binden, da es keine bekannte native Eigenschaft ist

Was mache ich falsch?

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

Der Fehler ist

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

Ich habe let vor talk verpasst:

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

Beachten Sie, dass ab Beta.17 die Verwendung von #... zur Deklaration lokaler Variablen in Strukturanweisungen wie NgFor veraltet ist. Verwenden Sie stattdessen let .
<div *ngFor="#talk of talks"> wird jetzt zu <div *ngFor="let talk of talks">

Ursprüngliche Antwort:

Ich habe # vor talk verpasst:

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

Es ist so leicht zu vergessen, dass #. Ich wünschte die Angular-Ausnahmefehlermeldung würde stattdessen sagen:
you forgot that # again.

474
Mark Rajcok

Ein weiterer Tippfehler, der zum Fehler des OP führt, könnte in sein:

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

statt of:

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

Diese Anweisung wird in der Angular2 Beta-Version verwendet.

Verwenden Sie anschließend let anstelle von #

let Schlüsselwort wird zur Deklaration der lokalen Variablen verwendet

16
Naveen

In meinem Fall war es ein kleiner Buchstabe f. Ich teile diese Antwort, nur weil dies das erste Ergebnis bei Google ist

Schreibe unbedingt *ngFor

8

In angular 7 wurde dies behoben, indem diese Zeilen zur .module.ts -Datei hinzugefügt wurden:

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

4
Alferd Nobel

Um es kurz zu machen, hatte ich versehentlich auf Winkel-Beta-16 herabgestuft.

Die let ... -Syntax ist NUR in 2.0.0-beta.17 gültig. +  

Wenn Sie die Let-Syntax für etwas unterhalb dieser Version ausprobieren. Sie werden diesen Fehler generieren.

Aktualisieren Sie entweder auf angle-beta-17 oder verwenden Sie die #item in der Elementsyntax.

3
Shaun

In meinem Fall habe ich den Fehler gemacht, *ng-for= aus den Dokumenten zu kopieren.

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

Korrigiere mich, wenn ich falsch liege. Es scheint jedoch, dass *ng-for= in *ngFor= geändert wurde.

2
Kris Hollenbeck

Versuchen Sie auch nicht, reines TypeScript in diesem zu verwenden ... Ich wollte mehr der Verwendung von for entsprechen und *ngFor="const filter of filters" verwenden und habe das ngFor nicht als bekannten Eigenschaftsfehler erhalten. Nur das Ersetzen von const durch let funktioniert.

Wie @ alexander-abakumov für of sagte, ersetzt durch in.

1
shamox

Ich habe vergessen, meine Komponente mit " @Input " (Doh!) Zu kommentieren.

book-list.component.html (beleidigender Code):

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

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

}
0
paulsm4

In meinem Fall wurde das Modul, das die Komponente enthält, die * ngFor verwendet, was zu diesem Fehler führte, nicht in app.module.ts aufgenommen. Durch die Aufnahme in das Import-Array wurde das Problem für mich behoben.

0
Roy Touw