What am I doing wrong?
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, [])
The error is
EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
This question is related to
angular
angular2-directives
My problem was, that Visual Studio somehow automatically lowercased *ngFor
to *ngfor
on copy&paste.
Try to import import { CommonModule } from '@angular/common';
in angular final as *ngFor
,*ngIf
all are present in CommonModule
There is an alternative if you want to use of
and not switch to in
. You can use KeyValuePipe
introduced in 6.1. You can easily iterate over an object:
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
Use let...of instead of let...in !!
If you're new to Angular (>2.x) and possibly migrating from Angular1.x, most likely you're confusing in
with of
. As andreas has mentioned in the comments below for ... of
iterates over values
of an object while for ... in
iterates over properties
in an object. This is a new feature introduced in ES2015.
Simply replace:
<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">
with
<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">
So, you must replace in
with of
inside ngFor
directive to get the values.
Q:Can't bind to 'pSelectableRow' since it isn't a known property of 'tr'.
A:you need to configure the primeng tabulemodule in ngmodule
In my case, WebStrom auto-complete inserted lowercased *ngfor
, even when it looks like you choose the right camel cased one (*ngFor
).
my solution was - just remove '*' character from the expression ^__^
<div ngFor="let talk in talks">
Watching this course https://app.pluralsight.com/library/courses/angular-2-getting-started-update/discussion
The author explains that new version of JavaScript has for of and for in, the for of is to enumerate objects and the for in is to enumerate the index of the array.
Source: Stackoverflow.com