Кутове виняток: Неможливо прив’язати до '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;

Використовуйте нехай ... замість того, щоб пускати ... в !!

Якщо ви новачок в кутовому (> 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>

З: Неможливо прив’язати до 'pSelectableRow', оскільки це не відома властивість 'tr'.

Відповідь: вам потрібно налаштувати табулемодуль primeng у ngmodule

моє рішення було - просто видаліть символ «*» з виразу ^ __ ^

<div ngFor="let talk in talks">