내가 무엇을 잘못하고 있지?
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을 구성해야합니다
