angular - parametros - Excepción: no se puede vincular a ''ngFor'' ya que no es una propiedad nativa conocida
output angular 6 (9)
¿Qué estoy haciendo mal?
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, [])
El error es
EXCEPTION: Template parse errors:
Can''t bind to ''ngFor'' since it isn''t a known native property
("<div [ERROR ->]*ngFor="talk of talks">
Eché de menos
let
delante de
talk
:
<div *ngFor="let talk of talks">
Tenga en cuenta que a
partir de beta.17, el
uso de
#...
para declarar variables locales dentro de directivas estructurales como NgFor está en desuso.
Use
let
lugar.
<div *ngFor="#talk of talks">
ahora se convierte en
<div *ngFor="let talk of talks">
Respuesta original:
Me perdí
#
delante de la
talk
:
<div *ngFor="#talk of talks">
Es muy fácil olvidar ese
#
.
Deseo que el mensaje de error de excepción angular diga en su lugar:
you forgot that # again
.
En angular 7 lo solucionó agregando estas líneas al archivo
.module.ts
:
import { CommonModule } from ''@angular/common''; imports: [CommonModule]
En mi caso cometí el error de copiar
*ng-for=
de los documentos.
https://angular.io/guide/user-input
Corrígeme si estoy equivocado.
Pero parece que
*ng-for=
se ha cambiado a
*ngFor=
En mi caso, era una letra minúscula
f
.
Estoy compartiendo esta respuesta solo porque este es el primer resultado en google
asegúrese de escribir
*ngFor
Esta declaración utilizada en la versión Angular2 Beta .....
En adelante use let en lugar de #
La palabra clave let se usa para declarar la variable local
Olvidé anotar mi componente con " @Input " (Doh!)
book-list.component.html (Código ofensivo):
<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ón corregida de 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() {}
}
Otro error tipográfico que conduce al error del OP podría estar usando
in
:
<div *ngFor="let talk in talks">
Debería usar
of
lugar:
<div *ngFor="let talk of talks">
Para mí, para abreviar una larga historia, sin querer me había rebajado a angular-beta-16.
La sintaxis let ... SOLO es válida en 2.0.0-beta.17 +
Si prueba la sintaxis let en cualquier cosa debajo de esta versión. Generarás este error.
Actualice a angular-beta-17 o use el #item en la sintaxis de elementos.
Tampoco intente usar TypeScript puro en esto ... Quería corresponder más
for
uso y usar
*ngFor="const filter of filters"
y obtuve el ngFor error de propiedad no conocido.
Simplemente reemplazar const por let está funcionando.
Como @ alexander-abakumov dijo para el
of
reemplazado por
in
.