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

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

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

Ответы

Ответ 1

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

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

Pre beta.17, это должно быть:

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

Начиная с бета .17, вместо # используйте синтаксис let. Дополнительную информацию см. В документе UPDATE.

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

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

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

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

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

UPDATE - начиная с бета-версии .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>

Ответ 2

В моем случае я ошибся

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

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

Итак, вы должны заменить in на of внутри директивы *ngFor.

Я делал это Angular 1.x. Приняли мне 4 часа, чтобы понять это! ☹️

Ответ 3

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

Ответ 4

Моя проблема заключалась в том, что Visual Studio каким-то образом автоматически с нижним регистром * ngFor для * ngfor для копирования и вставки.

Ответ 5

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

Ответ 6

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

<div ngFor="let talk in talks">