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">
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
.
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">
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
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
In angular 7 wurde dies behoben, indem diese Zeilen zur .module.ts
-Datei hinzugefügt wurden:
import { CommonModule } from '@angular/common'; imports: [CommonModule]
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.
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.
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
.
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() {}
}
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.