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

355

O que estou fazendo errado?

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="let talk in 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 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
Mark Rajcok
fonte
3
tente alterar isso <div * ngFor = "deixe falar nas conversas"> para <div * ngFor = "deixe falar nas conversas"> nota: "in" para "of"
Ishimwe Aubain Consolateur
Eu acho que você é de C # / Java background, eu cometi o mesmo erro de usar em vez de Of
Abhay Dhar

Respostas:

701

Como essa é a terceira vez que desperdicei mais de 5 minutos com esse problema, imaginei postar as perguntas e respostas. Espero que ajude outra pessoa no caminho ... provavelmente eu!

Eu digitei inem vez de ofna expressão ngFor.

Antes de 2-beta.17 , deve ser:

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

A partir do beta.17, use a letsintaxe em vez de #. Veja a atualização mais abaixo para obter mais informações.


Observe que a sintaxe ngFor "desugars" no seguinte:

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

Se usarmos em invez disso, ele se transforma em

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

Como ngForInnão é uma diretiva de atributo com uma propriedade de entrada com o mesmo nome (como ngIf), o Angular tenta ver se é uma propriedade (nativa conhecida) do templateelemento, e não é, portanto, o erro.

UPDATE - a partir de 2-beta.17, use a letsintaxe em vez de #. Isso atualiza para o seguinte:

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

Observe que a sintaxe ngFor "desugars" no seguinte:

<template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

Se usarmos em invez disso, ele se transforma em

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
Mark Rajcok
fonte
7
E sim, lembre -se #da talkvariável anterior (como você disse: "espero que ajude alguém mais adiante ... provavelmente eu!") #
Nobita
2
@ Nobita, sim, essa me tropeçou com a mesma frequência. Eu escrevi um Q & A para que um também: stackoverflow.com/questions/34012291/...
Mark Rajcok
2
tão óbvio quando você percebe ... acho isso realmente contra-intuitivo, tão acostumado ao estilo in-for Eu até votar ambas as suas mensagens de perguntas e respostas mais se eu pudesse, graças
Pete
11
Obrigado Mark. Não é a maior mensagem de erro - como o WTF "ngForIn" deveria significar !? Mas em retrospecto, duh! Eu lutei com isso por 20 minutos antes de encontrar suas perguntas e respostas.
Methodician
2
Concordo que a resposta deve ter os dois. Mas atualizei ainda mais a resposta para deixar mais claro que, depois da versão beta.17, a sintaxe é diferente. (Eu parei de trocar de lugar, então o último é o primeiro). Em vez disso, basta colocar uma pequena nota. À primeira vista, um recém-chegado pode não perceber a sintaxe mais recente. Sua mudança de um menor, mas faz uma grande diferença
redfox05
288

TL; DR;

Use let ... em vez de let ... in !!


Se você é novo para Angular (> 2.x) e, possivelmente, migrando de Angular1.x, provavelmente você está confundindo incom of. Como Andreas mencionou nos comentários abaixo for ... ofitera sobre values de um objecto, enquanto for ... initera sobre properties em um objeto. Este é um novo recurso introduzido no ES2015.

Simplesmente substitua:

<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

com

<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

Portanto, você deve substituir inpelaofngFor diretiva interna para obter os valores.

mamsoudi
fonte
2
Como um aparte - alguém sabe a razão por trás do uso de "de", "em" parece uma escolha mais natural aqui.
Morvael 22/06
2
@mamsoudi @Morvael A diferença é que for..initera as chaves / propriedades for...ofdo objeto enquanto itera os valores do objeto. for(prop in foo) {}é o mesmo que for(prop of Object.keys(foo)) {}. Este é um novo recurso de idioma do ECMA Script 2015 / ES6. Portanto, esse é apenas um problema angular remotamente.
Andreas Baumgart
isto é o que acontece quando você tem codificação em C # por anos e depois passar para angular
Samurai Jack
da solução está funcionando corretamente, obrigado
withoutOne
13

Tente importar import { CommonModule } from '@angular/common';em final angular *ngFor, pois *ngIftodos estão presentes emCommonModule

Rohitesh
fonte
Eu acho que essa resposta seria o motivo mais comum hoje em dia para obter o erro no título do OP.
G. Stoynev 17/09/19
11

No meu caso, o WebStrom preenche automaticamente as letras minúsculas *ngfor, mesmo quando parece que você escolhe o camelo certo ( *ngFor).

Eran Shabi
fonte
6

Meu problema era que o Visual Studio, de alguma forma, automaticamente em minúsculas *ngFor para *ngforcopiar e colar.

Tomino
fonte
1

Existe uma alternativa se você deseja usar ofe não mudar para in. Você pode usar o KeyValuePipeintroduzido no 6.1. Você pode facilmente iterar sobre um objeto:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>
सत्यमेव जयते
fonte
-3

P: Não é possível vincular a 'pSelectableRow', pois não é uma propriedade conhecida de 'tr'.

A: você precisa configurar o primeiro tabulemodule no ngmodule

user9838309
fonte
-15

minha solução foi - basta remover o caractere '*' da expressão ^ __ ^

<div ngFor="let talk in talks">
Unkas
fonte