例外：無法綁定到“ngFor”，因為它不是已知的本機屬性

Question

我究竟做錯了什么？

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

Answer 1

我錯過了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">

很容易忘記# 。 我希望 Angular 異常錯誤消息改為：
you forgot that # again 。

Answer 2

導致 OP 錯誤的另一個錯字可能是使用in ：

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

您應該使用of ，而不是：

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

Answer 3

此語句用於 Angular2 Beta 版中......

以后使用let而不是#

let關鍵字用於聲明局部變量

Answer 4

在 angular 7 中通過將這些行添加到.module.ts文件來解決.module.ts ：

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

Answer 5

就我而言，它是一個小寫字母f 。 我分享這個答案只是因為這是谷歌的第一個結果

確保寫*ngFor

Answer 6

您應該使用 let 關鍵字 as 來聲明局部變量，例如 *ngFor="let talk of talk"

Answer 7

就我而言，我犯了從文檔中復制*ng-for=的錯誤。

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

如果我錯了，請糾正我。 但似乎*ng-for=已更改為*ngFor=

Answer 8

對我來說，長話短說，我無意中降級到 angular-beta-16。

let ... 語法僅在 2.0.0-beta.17+ 中有效

如果您在此版本以下的任何內容上嘗試 let 語法。 您將生成此錯誤。

升級到 angular-beta-17 或在 items 語法中使用 #item 。

Answer 9

我忘了用“ @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() {}

}

Answer 10

也不要嘗試在這方面使用純 TypeScript ......我想更多地對應for用法並使用*ngFor="const filter of filters"並得到 ngFor not a known property 錯誤。 只需用 let 替換 const 即可。

正如@alexander-abakumov 所說的，將of替換為in 。

Answer 11

只是為了掩飾，當我得到同樣的錯誤，究其原因是在迭代器使用，而不是更多的情況

錯誤的方式let file in files

正確的方式let file of files

Answer 12

在我的情況下，包含使用 *ngFor 導致此錯誤的組件的模塊未包含在 app.module.ts 中。 將它包含在導入數組中為我解決了這個問題。

Answer 13

用這個

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

您需要指定變量來迭代對象數組

Answer 14

就我而言， =和"之間不應該有空格，

例如錯誤：

*ngFor = "let talk of talks"

對 ：

*ngFor="let talk of talks"

Answer 15

有同樣的問題，因為我用過
*ngFor='for let card of cards'
代替：
*ngFor='let card of cards'

一開始就有for就像一些“for循環”一樣，這里是錯誤的
它有效，但有錯誤

Answer 16

在我的情況下，我沒有在我擁有的 for 循環中聲明循環變量

<div *ngFor="pizza of pizzas; index as i">

代替

<div *ngFor="let pizza of pizzas; index as i">

在用“讓”聲明它之后，它對我有用。

Answer 17

嘿，對我來說，組件在導入后沒有正確導入到app.module.ts文件中，一切正常

@NgModule({ 聲明：[ YourComponent, OtherComponents ],

imports: [...]

)}