What am I doing wrong?
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, [])
The error is
EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">
This question is related to
angular
typescript
angular2-directives
ngfor
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
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.
Just to cover one more case when I was getting the same error and the reason was using in instead of of in iterator
Wrong way let file in files
Correct way let file of files
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() {}
}
You should use let keyword as to declare local variables e.g *ngFor="let talk of talks"
Another typo leading to the OP's error could be using in
:
<div *ngFor="let talk in talks">
You should use of
instead:
<div *ngFor="let talk of talks">
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.
Use this
<div *ngFor="let talk of talks>
{{talk.title}}
{{talk.speaker}}
<p>{{talk.description}}
</div>
You need to specify variable to iterate over an array of an object
Also don't try to use pure TypeScript in this... I wanted to more correspond to for
usage and use *ngFor="const filter of filters"
and got the ngFor not a known property error. Just replacing const by let is working.
As @alexander-abakumov said for the of
replaced by in
.
This Statement used in Angular2 Beta version.....
Hereafter use let instead of #
let keyword is used to declare local variable
In angular 7 got this fixed by adding these lines to .module.ts
file:
import { CommonModule } from '@angular/common';
imports: [CommonModule]
In my case I made the mistake of copying *ng-for=
from the docs.
https://angular.io/guide/user-input
Correct me if I am wrong. But it seems *ng-for=
has been changed to *ngFor=
Source: Stackoverflow.com