Angular exception: Can't bind to 'ngForIn' since it isn't a known native property

Question

What am I doing wrong?

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

@Component({
  selector: \'conf-talks         


        

Answer 1

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

Answer 2

In my case, WebStrom auto-complete inserted lowercased *ngfor, even when it looks like you choose the right camel cased one (*ngFor).

Answer 3

TL;DR;

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.

Answer 4

my solution was - just remove '*' character from the expression ^__^

<div ngFor="let talk in talks">

Answer 5

Try to import import { CommonModule } from '@angular/common'; in angular final as *ngFor ,*ngIf all are present in CommonModule

Answer 6

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>