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

output angular 6

Question

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

Answer 1

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 .

Answer 2

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

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

Answer 3

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=

Answer 4

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

Answer 5

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

Answer 6

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

}

Answer 7

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

Answer 8

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.

Answer 9

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 .