Components: Problem with ngFor inside an md-list-item

[davidanaya]

Hi

I'm new to Angular Material and I'm trying to do a simple list with md-kist-item using ngFor to iterate over a list of elements in my list, but I'm getting a weird error message.

Can't bind to 'ngForIn' since it isn't a known property of 'md-list-item'.

1. If 'md-list-item' is an Angular component and it has 'ngForIn' input, then verify that it is part of this module.
2. If 'md-list-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

This is the actual code

<md-list>
   <md-list-item *ngFor="let tweet in tweets">
     <img md-list-avatar src="" alt="">
     <h4 md-line>{{ tweet.user }} <span><i>@{{ tweet.username }}</i></span></h4>
     <p md-line>{{ tweet.text }}</p>
   </md-list-item>
</md-list>

I'm guessing this is an import issue, but if I use md-list-item with a list of fixed values it works fine, and also I can use ngFor in other parts of my application and also works fine, so it's like they don´t work fine together (although in the tutorial for md-list-item ngFor is also used).

These are my module imports

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    MaterialModule.forRoot()
  ],
  providers: [
    AUTH_PROVIDERS,
    LoggedInGuard,
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: APP_BASE_HREF, useValue: '/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

I'm using angular 2.1.0 and angular/material 2.0.0-alpha.9-3

Can anyone give me a hint? Thanks!

[jmcgoldrick]

if that is a copy/paste for your code everything looks right, except:

<md-list-item *ngFor="let tweet in tweets"> should be <md-list-item *ngFor="let tweet of tweets">

i.e. replace in with of

[davidanaya]

man... now I feel stupid :-(
thanks a lot, that was it

[crisbeto]

Can I assume that it's resolved @davidanaya?

[davidanaya]

Yes, it is, sorry.

[joshikumarmanne]

no, it's giving this error after replacing 'in' with 'of'.
Can't bind to 'ngForOf' since it isn't a known property of 'md-list-item'.

[juni381]

{{ or.value }}

i m now getting the error , displayed below!! i have import BrowserModule , CommonModule

Error :

core.js:1350 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}