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

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

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

Так как это уже третий раз, когда я потратил больше 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>

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директивой для получения значений.

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

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

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

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

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

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

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

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

<div ngFor="let talk in talks">