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

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.


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

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


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


10

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

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


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"


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.



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

}

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.


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


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


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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.