ข้อยกเว้น: ไม่สามารถผูกกับ 'ngFor' ได้เนื่องจากไม่ใช่คุณสมบัติดั้งเดิมที่รู้จัก

ผมทำอะไรผิดหรือเปล่า?

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of 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 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

ฉันพลาดletหน้าtalk:

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

โปรดทราบว่าการใช้งานbeta.17ของ#...เพื่อประกาศตัวแปรท้องถิ่นภายในคำสั่งโครงสร้างเช่น NgFor นั้นเลิกใช้แล้ว ใช้letแทน

<div *ngFor="#talk of talks"> ตอนนี้กลายเป็น <div *ngFor="let talk of talks">

คำตอบเดิม:

ฉันพลาด#หน้าtalk:

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

#มันจึงเป็นเรื่องง่ายที่จะลืมว่า ฉันหวังว่าข้อความแสดงข้อผิดพลาดข้อยกเว้นเชิงมุมจะพูดว่า:
you forgot that # again.

ข้อผิดพลาดอื่นที่นำไปสู่ข้อผิดพลาดของ OP สามารถใช้in:

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

คุณควรใช้ofแทน:

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

คำแถลงนี้ใช้ในเวอร์ชั่น Angular2 Beta .....

ต่อจากนี้ใช้ให้ใช้แทน#

ให้คำหลักที่ใช้ในการประกาศตัวแปรท้องถิ่น

fในกรณีของฉันมันเป็นอักษรตัวเล็ก ฉันกำลังแบ่งปันคำตอบนี้เพียงเพราะนี่เป็นผลลัพธ์แรกบน google

ให้แน่ใจว่าจะเขียน *ngFor

ในมุม 7 ได้รับการแก้ไขโดยการเพิ่มบรรทัดเหล่านี้ไปยัง.module.tsไฟล์:

import { CommonModule } from '@angular/common'; imports: [CommonModule]

คุณควรใช้คำหลัก let เพื่อประกาศตัวแปรท้องถิ่นเช่น * ngFor = "let talk of speak"

สำหรับฉันในการตัดเรื่องสั้นให้สั้นฉันได้ลดระดับเป็น Angular-beta-16 โดยไม่ได้ตั้งใจ

ไวยากรณ์ let ... นั้นถูกต้องใน 2.0.0-beta.17 + เท่านั้น

หากคุณลองใช้ไวยากรณ์ให้กับสิ่งใดก็ตามด้านล่างรุ่นนี้ คุณจะสร้างข้อผิดพลาดนี้

อัพเกรดเป็น angular-beta-17 หรือใช้ #item ในไวยากรณ์ไอเท็ม

ในกรณีของฉันฉันทำผิดพลาดในการคัดลอก*ng-for=จากเอกสาร

https://angular.io/guide/user-input

ถูกต้องฉันถ้าฉันผิด แต่ดูเหมือน*ng-for=จะเปลี่ยนเป็น*ngFor=

ฉันลืมใส่คำอธิบายประกอบด้วย " @Input " (Doh!)

book-list.component.html (รหัสที่ละเมิด ):

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

เวอร์ชันที่ถูกต้องของbook-item.component.ts :

import { Component, OnInit, Input } from '@angular/core';

import { Book } from '../model/book';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

  @Input()
  public book: Book;

  constructor(private bookService: BookService)  { }

  ngOnInit() {}

}

อย่าพยายามใช้ TypeScript ที่แท้จริงในเรื่องนี้ ... ฉันต้องการที่จะสอดคล้องกับforการใช้งานและการใช้งานมากขึ้น*ngFor="const filter of filters"และได้รับ ngFor ไม่ใช่ข้อผิดพลาดของคุณสมบัติที่เป็นที่รู้จัก เพียงแค่แทนที่ const โดยให้ทำงาน

ขณะที่อเล็กซานเด @-Abakumov กล่าวว่าสำหรับแทนที่ด้วยofin

ในกรณีของฉันโมดูลที่มีส่วนประกอบโดยใช้ * ngFor ทำให้เกิดข้อผิดพลาดนี้ไม่รวมอยู่ใน app.module.ts การรวมไว้ในอาร์เรย์การนำเข้าช่วยแก้ไขปัญหาสำหรับฉัน

เพียงเพื่อให้ครอบคลุมกรณีหนึ่งมากขึ้นเมื่อผมได้รับข้อผิดพลาดเดียวกันและเหตุผลที่ถูกใช้ในการแทนของใน iterator

ทางที่ผิด let file in files

วิธีที่ถูกต้อง let file of files

ใช้สิ่งนี้

<div *ngFor="let talk of talks> 
   {{talk.title}} 
   {{talk.speaker}}
   <p>{{talk.description}} 
</div>

คุณต้องระบุตัวแปรเพื่อวนซ้ำแถวของวัตถุ