Exceção: Não é possível vincular a 'ngFor', pois não é uma propriedade nativa conhecida

286

O que estou fazendo de errado?

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, [])

O erro é

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
fonte

Respostas:

644

Eu perdi letna frente de talk:

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

Observe que, a partir de beta.17, o uso de #...para declarar variáveis ​​locais dentro de diretivas estruturais como NgFor está obsoleto. Use em letvez disso.

<div *ngFor="#talk of talks"> agora se torna <div *ngFor="let talk of talks">

Resposta original:

Eu perdi #na frente de talk:

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

É tão fácil esquecer isso #. Desejo a mensagem de erro exceção Angular diria pelo contrário:
you forgot that # again.

Mark Rajcok
fonte
Para que exatamente é o e comercial? Corrigi meus próprios problemas, mas não tenho certeza do que isso faz.
datatype_void
4
@datatype_void, o hash ( #) é usada para declarar uma variável modelo local
Mark Rajcok
Tentei usar a sintaxe "let" em vez do # que produziu o "Não é possível vincular a 'ngFor', pois não é uma propriedade nativa conhecida". O mesmo comportamento que você viu na sua pergunta original. Mudei novamente para o # e parecia funcionar sem problemas. Eu estou usando angular2.0.0-rc.1 e eu também tenho o mesmo comportamento com angular2.0.0-beta.17
Chadley08
1
@ Chadley08, crie um plunker. Deveria funcionar. Aqui está um punk rc.1 e um plunker beta.17 que funcionam bem.
Mark Rajcok
Aqui está um problema angular sobre a mensagem de erro ser enganosa: github.com/angular/angular/issues/10644 #
Alexander Taylor
79

Outro erro de digitação que leva ao erro do OP pode estar usando in:

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

Você deve usar of:

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

Esta declaração usada na versão beta do Angular2 .....

A seguir, use let em vez de #

a palavra-chave let é usada para declarar variável local

Naveen
fonte
13

No meu caso, era uma pequena letra f . Estou compartilhando esta resposta apenas porque este é o primeiro resultado no google

certifique-se de escrever *ngFor

Mohamed Kawsara
fonte
10

No angular 7, isso foi corrigido adicionando estas linhas ao .module.tsarquivo:

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

Alferd Nobel
fonte
2
Surpreendeu que isso não tenha mais votos positivos. Esqueci totalmente de importar o CommonModule em um dos meus módulos e me deparei com esse erro.
Allen Rufolo
8

Você deve usar a palavra-chave let para declarar variáveis ​​locais, por exemplo, * ngFor = "let talk of speech"

Rsona
fonte
5

Para mim, para resumir uma longa história, eu inadvertidamente havia rebaixado para angular-beta-16.

A sintaxe let ... só é válida no 2.0.0-beta.17 +

Se você tentar a sintaxe let em qualquer coisa abaixo desta versão. Você irá gerar este erro.

Atualize para angular-beta-17 ou use o #item na sintaxe de itens.

Shaun
fonte
5

No meu caso, cometi o erro de copiar *ng-for=os documentos.

https://angular.io/guide/user-input

Corrija-me se eu estiver errada. Mas parece *ng-for=que foi alterado para*ngFor=

Kris Hollenbeck
fonte
2

Esqueci de anotar meu componente com " @Input " (Doh!)

book-list.component.html (código incorreto ):

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

Versão corrigida do 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
fonte
2

Também não tente usar TypeScript puro nisso ... Eu queria corresponder mais ao foruso e uso *ngFor="const filter of filters"e obtive o ngFor que não é um erro de propriedade conhecido. Apenas substituindo const por let está funcionando.

Como @ alexander-abakumov disse para o ofsubstituído por in.

shamox
fonte
o meu problema era em vez de "de" eu estava usando "in"
Ishimwe Aubain Consolateur
0

No meu caso, o módulo que contém o componente usando o * ngFor resultante neste erro, não foi incluído no app.module.ts. Incluí-lo na matriz de importações resolveu o problema para mim.

Roy Touw
fonte
0

Apenas para cobrir mais um caso, quando eu estava recebendo o mesmo erro e o motivo estava usando em vez de no iterador

caminho errado let file in files

Maneira correta let file of files

Robin Mathur
fonte
0

Usa isto

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

Você precisa especificar uma variável para iterar sobre uma matriz de um objeto

Akshay S Patil
fonte