Error in ngFor when used on button with ion-item 'attribute'


#1

I have the following:

<button ion-item
      *ngFor="let conversation of conversations"
      (click)="openConversation(conversation)">
      <ion-avatar item-left>
        <img width="40" height="40"
          src="{{ conversation.partner.profileUrl }}"
          alt="{{ conversation.partner.profileUrl }}">
      </ion-avatar>
      <h2> {{ conversation.partner.name }} </h2>
      <p> {{ conversation.getLastMessage().text }} </p>
    </button>

I get an error that says:

Can’t bind to ‘ngForIn’ since it isn’t a known property of ‘ion-item’.

  1. If ‘ion-item’ is an Angular component and it has ‘ngForIn’ input, then verify that it is part of this module.
  2. If ‘ion-item’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schemas’ of this component to suppress this message.

The error is longer that this, but I figured this was the most important part.
I have conversation defined.


#2

you can put in ion-list

<ion-list>
 <button ion-item
      *ngFor="let conversation of conversations"
      (click)="openConversation(conversation)">
      <ion-avatar item-left>
        <img width="40" height="40"
          src="{{ conversation.partner.profileUrl }}"
          alt="{{ conversation.partner.profileUrl }}">
      </ion-avatar>
      <h2> {{ conversation.partner.name }} </h2>
      <p> {{ conversation.getLastMessage().text }} </p>
    </button>
</ion-list>