각도 예외 : '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 분 이상을 낭비한 것은 적어도 세 번째이기 때문에 Q & A를 게시 할 것이라고 생각했습니다. 다른 사람이 길에서 다른 사람을 도울 수 있기를 바랍니다.

ngFor 표현식 in대신 입력 했습니다 of.

2-beta.17의 경우 다음과 같아야합니다.

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

베타 17부터는 let대신 구문을 사용하십시오 #. 자세한 내용은 아래 업데이트를 참조하십시오.

ngFor 구문은 다음과 같이 "설탕 제거"됩니다.

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

in대신에 사용 하면

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

ngForIn같은 이름의 입력 속성을 가진 속성 지시문이 아니기 때문에 ngIfAngular는 그것이 template요소 의 (알려진 네이티브) 속성인지 확인하려고 시도 하므로 오류가 아닙니다.

업데이트 -2-beta.17부터 let대신 구문을 사용하십시오 #. 이것은 다음으로 업데이트됩니다.

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

ngFor 구문은 다음과 같이 "설탕 제거"됩니다.

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

in대신에 사용 하면

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

TL; DR;

let ... in 대신에 let ... of 를 사용하십시오 !

Angular (> 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. KeyValuePipe6.1에서 소개 된 것을 사용할 수 있습니다 . 객체를 쉽게 반복 할 수 있습니다.

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

Q : 'tr'의 알려진 속성이 아니기 때문에 'pSelectableRow'에 바인딩 할 수 없습니다.

A : ngmodule에서 프라임 tabulemodule을 구성해야합니다

내 해결책은-^ __ ^ 표현식에서 '*'문자를 제거하는 것입니다.

<div ngFor="let talk in talks">