ข้อยกเว้นเชิงมุม: ไม่สามารถผูกกับ '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 นาทีสำหรับปัญหานี้ฉันคิดว่าฉันจะโพสต์คำถาม & คำตอบฉันหวังว่ามันจะช่วยคนอื่นตามทาง ... อาจเป็นฉัน!

ฉันพิมพ์inแทนofนิพจน์ ngFor

ก่อน 2-7.17มันควรจะเป็น:

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

ในฐานะของ beta.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องค์ประกอบหรือไม่และไม่ใช่ข้อผิดพลาด

UPDATE - ณ วันที่ 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;

ใช้ให้ ...แทนที่จะปล่อยให้ ... ใน !!

หากคุณกำลังใหม่เพื่อเชิงมุม (> 2.x) และอาจจะย้ายจาก Angular1.x ส่วนใหญ่มีแนวโน้มที่คุณกำลังสับสนกับin ofในฐานะที่เป็น andreas ได้กล่าวถึงในความคิดเห็นด้านล่างfor ... ofiterates มากกว่าvalues ของวัตถุในขณะที่for ... initerates มากกว่า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ด้วยofngForคำสั่งภายในเพื่อรับค่า

พยายามที่จะนำเข้าimport { CommonModule } from '@angular/common';ในรอบสุดท้ายเชิงมุมเป็น*ngFor, *ngIfทั้งหมดที่มีอยู่ในปัจจุบันCommonModule

ในกรณีของฉัน WebStrom จะเติมการแทรกอัตโนมัติให้ต่ำลง*ngforแม้ว่าจะดูเหมือนว่าคุณเลือกอูฐที่ถูกต้อง*ngForแล้วก็ตาม( )

ปัญหาของผมก็คือว่า Visual Studio อย่างใดโดยอัตโนมัติlowercased *ngForไป*ngforบนสำเนาและวาง

มีทางเลือกคือถ้าคุณต้องการที่จะใช้และไม่ได้เปลี่ยนไปof inคุณสามารถใช้KeyValuePipeแนะนำใน 6.1 คุณสามารถวนซ้ำวัตถุได้อย่างง่ายดาย:

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

ถาม: ไม่สามารถผูกกับ 'pSelectableRow' ได้เนื่องจากไม่ใช่ทรัพย์สินที่รู้จักของ 'tr'

ตอบ: คุณต้องกำหนดค่า primeng tabulemodule เป็น ngmodule

วิธีแก้ปัญหาของฉันคือ - เพียงลบอักขระ '*' ออกจากนิพจน์ ^ __ ^

<div ngFor="let talk in talks">