Angular exception: Can't bind to 'ngForIn' since it isn't a known native property
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">I typed in instead of of in the ngFor expression. Befor 2-beta.17, it should be: <div *ngFor="#talk of talks"> As of beta.17, use the let syntax instead of #. See the UPDATE further down for more info. Note that the ngFor syntax "desugars" into the following: <template ngFor #talk [ngForOf]="talks"> <div>...</div> </template> If we use in instead, it turns into <template ngFor #talk [ngForIn]="talks"> <div>...</div> </template> Since ngForIn isn't an attribute directive with an input property of the same name (like ngIf), Angular then tries to see if it is a (known native) property of the template element, and it isn't, hence the error. UPDATE - as of 2-beta.17, use the let syntax instead of #. This updates to the following: <div *ngFor="let talk of talks"> Note that the ngFor syntax "desugars" into the following: <template ngFor let-talk [ngForOf]="talks"> <div>...</div> </template> If we use in instead, it turns into <template ngFor let-talk [ngForIn]="talks"> <div>...</div> </template>
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/976136ac3d0928d3a491c7a0f3f973c674836034befbb5c4e7ed8e7502dbed47