Excepción: no se puede vincular a 'ngFor' ya que no es una propiedad nativa conocida

286

¿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">
Mark Rajcok
fuente

Respuestas:

644

Me perdí letdelante 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. Usar en su letlugar.

<div *ngFor="#talk of talks"> ahora se convierte <div *ngFor="let talk of talks">

Respuesta original:

Me perdí #delante de talk:

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

Es muy fácil olvidar eso #. Me gustaría que el mensaje de error de excepción angular tendría lugar decir:
you forgot that # again.

Mark Rajcok
fuente
¿Para qué es exactamente el ampersand? Solucioné mis propios problemas, pero no estoy seguro de lo que esto hace.
datatype_void
44
@datatype_void, el hash ( #) se usa para declarar una variable de plantilla local
Mark Rajcok
Intenté usar la sintaxis "let" en lugar de la # que produjo el "No se puede vincular a 'ngFor' ya que no es una propiedad nativa conocida". El mismo comportamiento que viste en tu pregunta original. Lo cambié de nuevo a # y parecía funcionar sin ningún problema. Estoy usando angular2.0.0-rc.1 y también obtuve el mismo comportamiento con angular2.0.0-beta.17
Chadley08
1
@ Chadley08, crea un saqueador. Deberia de funcionar. Aquí hay un punker rc.1 y un plunker beta.17 que funcionan bien.
Mark Rajcok
Aquí hay un problema angular sobre el mensaje de error que es engañoso: github.com/angular/angular/issues/10644
Alexander Taylor
79

Otro error tipográfico que conduce al error del OP podría estar usando in:

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

Deberías usar ofen su lugar:

<div *ngFor="let talk of talks">
Alexander Abakumov
fuente
21

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

Naveen
fuente
13

En mi caso, era una pequeña letra f. Estoy compartiendo esta respuesta solo porque este es el primer resultado en google

asegúrate de escribir *ngFor

Mohamed Kawsara
fuente
10

En angular 7 lo solucionó agregando estas líneas al .module.tsarchivo:

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

Alferd Nobel
fuente
2
Sorprendido, esto no tiene más votos a favor. Olvidé por completo importar CommonModule en uno de mis módulos y me encontré con este error.
Allen Rufolo
8

Debe usar la palabra clave let como para declarar variables locales, por ejemplo, * ngFor = "let talk of talk"

Rsona
fuente
5

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.

Shaun
fuente
5

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=

Kris Hollenbeck
fuente
2

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

}
paulsm4
fuente
2

Tampoco intente usar TypeScript puro en esto ... Quería corresponder más al foruso y uso *ngFor="const filter of filters"y obtuve el ngPara un error de propiedad no conocido. Simplemente reemplazar const por let está funcionando.

Como @ alexander-abakumov dijo para el ofreemplazado por in.

shamox
fuente
mi problema era en lugar de "de" estaba usando "en"
Ishimwe Aubain Consolateur
0

En mi caso, el módulo que contiene el componente que usa * ngFor como resultado de este error no se incluyó en app.module.ts. Incluirlo allí en la matriz de importaciones resolvió el problema para mí.

Roy Touw
fuente
0

Solo para cubrir un caso más cuando recibía el mismo error y la razón estaba usando en lugar de en iterador

Camino equivocado let file in files

Forma correcta let file of files

Robin Mathur
fuente
0

Utilizar este

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

Debe especificar la variable para iterar sobre una matriz de un objeto

Akshay S Patil
fuente