Exception: Can't bind to 'ngFor' since it isn't a known native property

Question

What am I doing wrong?

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

@Component({
  selector: \'conf-talks\',
  template: `


        
                      

              相关标签:
       
      

Answer 1

In angular 7 got this fixed by adding these lines to .module.ts file:

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

Answer 2

I forgot to annotate my component with "@Input" (Doh!)

book-list.component.html (Offending code):

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

Corrected version of 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 3

In my case, it was a small letter f. I'm sharing this answer just because this is the first result on google

make sure to write *ngFor

Answer 4

In my case, the module containing the component using the *ngFor resulting in this error, was not included in the app.module.ts. Including it there in the imports array resolved the issue for me.

Answer 5

For me, to cut a long story short, I had inadvertently downgraded to angular-beta-16.

The let ... syntax is ONLY valid in 2.0.0-beta.17+

If you try the let syntax on anything below this version. You will generate this error.

Either upgrade to angular-beta-17 or use the #item in items syntax.

Answer 6

I missed let in front of talk:

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

---

Note that as of beta.17 usage of #... to declare local variables inside of structural directives like NgFor is deprecated. Use let instead.

<div *ngFor="#talk of talks"> now becomes <div *ngFor="let talk of talks">

Original answer:

I missed # in front of talk:

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

It is so easy to forget that #. I wish the Angular exception error message would instead say:
you forgot that # again.