Угловое исключение: не может привязываться к '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">
8 214
angularjs angular2-directives

8 ответов:

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

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

Befor 2-beta.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>
464

TL; DR;

использовать давайте...из вместо let...in !!

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

заменить:

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

С 

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

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

142

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

9

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

5

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

5

вместо на:

  template: `<div *ngFor="let talk in talks">

использовать на:

  template: `<div *ngFor="let talk of talks">

надеюсь, что это решает проблему.

5

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

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

0

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

<div ngFor="let talk in talks">
-7