Угловое исключение: невозможно связать с ngForIn, поскольку оно не является известным нативным свойством

356

Что я делаю неправильно?

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

Ошибка

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
Марк Райкок
источник
3
попытайтесь изменить это <div * ngFor = "let talk in talk"> на это <div * ngFor = "let talk of talk"> примечание: "in" to "of"
Ишимве Обен Консолятер
Я думаю, что вы из C # / Java опыт, я сделал ту же ошибку, используя вместо вместо
Абхай Дхар

Ответы:

701

Так как это уже третий раз, когда я потратил больше 5 минут на эту проблему, я решил опубликовать вопросы и ответы. Я надеюсь, что это поможет кому-то еще в будущем ... возможно, мне!

Я набрал inвместо ofвыражения ngFor.

Для 2-бета.17 это должно быть:

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

Начиная с бета.17, используйте letсинтаксис вместо #. Смотрите ОБНОВЛЕНИЕ ниже для получения дополнительной информации.


Обратите внимание, что синтаксис ngFor "desugars" в следующем:

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

Если мы используем inвместо этого, он превращается в

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

Так ngForInкак не является директивой атрибута с входным свойством с тем же именем (например ngIf), Angular пытается выяснить, является ли оно (известным собственным) свойством templateэлемента, и это не так, следовательно, ошибка.

ОБНОВЛЕНИЕ - начиная с 2-бета.17, используйте letсинтаксис вместо #. Это обновляет следующее:

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

Обратите внимание, что синтаксис ngFor "desugars" в следующем:

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

Если мы используем inвместо этого, он превращается в

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
Марк Райкок
источник
7
И да, помните# перед talkпеременной (как ваш сказал: «Надеюсь , что это помогает кто - то вниз по дороге ... наверное меня!»)
Nobita
2
@ Нобита, да, это меня так же часто приводило в замешательство. Я также написал вопрос и
ответ
2
настолько вонючим, когда ты понимаешь ... Я нахожу это действительно нелогичным, так привыкли к стилю. Я бы больше проголосовал за ваши посты вопросов и ответов, если бы мог, спасибо
Пит
1
Спасибо Марк. Это не самое большое сообщение об ошибке - как WTF означает "ngForIn" !? Но в ретроспективе, дух! Я боролся с этим около 20 минут, прежде чем нашел ваши вопросы и ответы.
Методик
2
Я согласен, что ответ должен иметь оба. Но я также обновил ответ, чтобы было яснее, что после бета.17 синтаксис другой. (Я остановился, не обмениваясь вокруг этого, таким образом, последний является первым). Вместо этого я просто вставил небольшую заметку. На первый взгляд, новичок может не реализовать последний синтаксис. Это небольшое изменение, но имеет большое значение
redfox05
288

TL; DR;

Используйте let ... of вместо let ... in !!


Если вы новичок в угловом (> 2.x) и , возможно , мигрирующие из Angular1.x, скорее всего , ты путаешь inс of. Как андреас упомянул в комментариях ниже for ... ofперебирает values от объекта , а for ... inперебирает properties в объекте. Это новая функция, представленная в ES2015.

Просто замените:

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

с

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

Таким образом, вы должны заменить inсof внутренней ngForдирективой для получения значений.

mamsoudi
источник
2
Как отступление - кто-нибудь знает причину использования «of», «in» кажется более естественным выбором здесь.
Морваэль
2
@mamsoudi @Morvael Различие состоит в том, что итерирует for..inключи / свойства for...ofобъекта, в то время как итерирует значения объекта. for(prop in foo) {}так же, как for(prop of Object.keys(foo)) {}. Это новая языковая функция ECMA Script 2015 / ES6. Так что это только отдаленно угловая проблема.
Андреас Баумгарт
это то , что происходит , когда вы были кодирования в C # в течение многих лет , а затем перейти к угловому
Самурай Джек
решения работает правильно, спасибо
одного
13

Попробуйте импортировать import { CommonModule } from '@angular/common';в угловой финал, так как *ngFor, *ngIfвсе присутствуют вCommonModule

Rohitesh
источник
Я думаю, что этот ответ был бы более распространенной причиной для получения ошибки в заголовке OP.
Г. Стойнев
11

В моем случае WebStrom автоматически завершает вставку в нижнем регистре *ngfor, даже если кажется, что вы выбрали правильный вариант в верблюде ( *ngFor).

Эран Шаби
источник
6

Моя проблема была, что Visual Studio как - то автоматически строчными *ngFor , чтобы *ngforна копии и пасты.

Tomino
источник
1

Есть альтернатива, если вы хотите использовать, ofа не переключаться на in. Вы можете использовать KeyValuePipeвведенный в 6.1. Вы можете легко перебрать объект:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>
सत्यमेव जयते
источник
-4

Q: Невозможно привязать к pSelectableRow, так как это не известное свойство tr.

A: вам нужно настроить основной модуль в ngmodule

user9838309
источник
-16

мое решение было - просто удалите символ '*' из выражения ^ __ ^

<div ngFor="let talk in talks">
Unkas
источник