How to apply multiple template bindings on one element in RC0


#1

In my template, I have to use *virtualItem and *ngSwitchCase bindings together, but when I run app, I face an error that say, “Can’t have multiple template bindings on one element”.
Here is my template:

<ion-list [ngSwitch]="homeList" [virtualScroll]="posts">
  <ion-item-sliding *virtualItem="let post" *ngSwitchCase="'news'">

      <ion-item (click)="gotoDetails(post)">
        <ion-note item-left >
          <ion-icon class="fa fa-align-right fa-lg" item-left></ion-icon>
        </ion-note>
        <h2> {{post.title}} </h2>
      </ion-item>

      <ion-item-options side="left">
        <button class="item-sliding-button" ion-button color="light" (click)="addToFavorites()">
          <ion-icon color="favorite" class="fa fa-star-o fa-2x"></ion-icon>
        </button>
      </ion-item-options>

  </ion-item-sliding>
</ion-list>

The aim of this template is using both Segment and VirtualScroll together. Is it possible at all?
What should I do?


#2

Had that error too. I just added a div under the element where I had multiple bindings and that solved my issue

<ion-item-sliding *virtualItem="let post">
   <div *ngSwitchCase="'news'">

something like that…


#3

Would using two explicit <template> elements help?


#4

Dear @rapropos & @reedrichards,
I did something like that. When I add *ngSwitchCase in outer element, Segment didn’t work and vice versa when I add *virtualItem, VirtualScroll didn’t work.


#5

I’m talking about explicit <template> elements instead of the * syntactic sugar. Those do not appear in the DOM, so unlike using (for example) a <div>, they should not mess up CSS selectors.


#6

I used it too but it didn’t work. I add a <template> between <ion-list> and <ion-item-sliding>, and saw this error: “virtualItem required within virtualScroll”. and when I add it inside <ion-item-sliding>, the VirtualScroll didn’t work. :confused:


#7

Maybe dumb, but who knows…does it work better with a ngIf than ngSwitchCase?

Otherwise sorry I can’t be helpful here :frowning: