각도 예외:알려진 기본 속성이 아니므로 'ngForIn'에 바인딩할 수 없습니다.

각도 예외:알려진 기본 속성이 아니므로 '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">

입력했습니다in대신에ofngFor 식으로.

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-beta.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;

들여보내는 대신에 let...를 사용하세요!!

---

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

따라서 내부로 대체해야 합니다.ngFor값을 가져오는 지침.

당신이 사용하고 싶다면 대안이 있습니다.of으로 전환하지 않음in사용할 수 있습니다.KeyValuePipe6.1에 도입되었습니다.개체 위에서 쉽게 반복할 수 있습니다.

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

대신 사용합니다.KeyValue Pipe를 사용할 수 있습니다. 객체에 대해 쉽게 반복할 수 있습니다.

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

가져오기 시도import { CommonModule } from '@angular/common';로서 각진 결승전에서.*ngFor,*ngIf에 모두 참석함CommonModule

내 경우, WebStrom 자동 완성 삽입 소문자*ngfor심지어 당신이 올바른 낙타 케이스를 선택한 것처럼 보일 때도 (*ngFor).

제 문제는 Visual Studio가 자동으로 케이스를 낮춘다는 것입니다. *ngFor로.*ngfor사본과 사본으로

기본적으로 새 클래스를 사용하여 팝업을 만들면 해당 클래스를 아래에 추가해야 합니다.

declarations: []

인base.module.ts or app.module.ts

내 예제 코드

#######################################################.

@Component({
  selector: 'app-modal-content',
  templateUrl: './order-details.html',
  encapsulation: ViewEncapsulation.None,
  styles: []
})

export class NgbdModalContent {
  @Input() orderDetails: any;
  private orderId;
  private customer;
  private orderDate;
  private shipDate;
  private totalAmount;
  private salesTax;
  private shippingCost;
  private transactionStatus;
  private isPaid;
  private isMailSent;
  private paymentDate;

  // private orderDetails;

  constructor(public activeModal: NgbActiveModal) {
  }
}

#######################################################.

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
  declarations: [
    NavbarsComponent,
    NgbdModalContent,
  ]
})
export class BaseModule { }

gotcha를 하나 더 추가하자면, 저는 순진하게도 만약 당신이 그것을 사용하지 않는다면.let루프의 인덱스를 할당하는 문도 동일한 오류를 받습니다.

<span *ngFor="let button of buttons; i: index; trackBy: trackBy">
...
</span>

또한 동일한 오류를 발생시킵니다.다음 버전에서 해결할 수 있습니다.

<span *ngFor="let button of buttons; let i = index; trackBy: trackBy">
...
</span>

단순히 "in"을 "of"로 바꾸는 것만으로도 저의 같은 문제가 해결되었습니다.

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

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

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

A: 프라이밍 테이블 모듈을 구성해야 합니다.

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

<div ngFor="let talk in talks">

언급URL : https://stackoverflow.com/questions/34561168/angular-exception-cant-bind-to-ngforin-since-it-isnt-a-known-native-propert