0

I've just started using Ionic 2 recently, one of my PWA's pages is supposed to display info on the week's menus from different restaurants.

What I am trying to do is have a ion-segment with a button for each one of those restaurants that would let me switch the content of my page between the menus of each restaurant.

Below is the important part of my html file, the problematic line is <ion-list *ngSwitchCase=restaus.restName>. I tried a bunch of different ways to write it and I cannot make it work (with the double brackets and with the " characters).

By default the page is correctly only showing results from the "MISERICORDE" restaurant, but clicking on the segments doesn't do anything.

this.restaurs = "MISERICORDE";
  <ion-toolbar no-border-top >
    <ion-segment [(ngModel)]="restaurs">
        <ion-segment-button *ngFor="let restaus of restaurants" value="{{restaus.restName}}">
          {{restaus.restName}}
        </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

<div [ngSwitch]="restaurs">
      <div *ngFor="let restaus of restaurants">
        <ion-list *ngSwitchCase=restaus.restName>
          <h2>{{restaus.restName}}</h2>
            <ion-list no-lines>
              <ion-item *ngFor="let menus of restaus.restMenus"  >
                {{menus.dayName}}
                <ion-card text-wrap>
                  <ion-card-content>
                    <ion-item *ngFor="let dmenus of menus.dayMenus">
                      <h3>{{dmenus.menuName}}</h3>
                      <ion-item>
                        Soupe<br />
                        <button ion-button   clear (click)="openMenu(dmenus.menuSoup)">{{dmenus.menuSoup}}</button>
                      </ion-item>
                      <ion-item>
                        Plat principal<br />
                        <button ion-button   clear (click)="openMenu(dmenus.menuMain)">{{dmenus.menuMain}}</button>
                      </ion-item> 
                      <ion-item>
                      Accompagnement(s):
                        <ion-list>
                            <ion-item *ngFor="let sideDish of dmenus.menuSide">
                              <button ion-button   clear (click)="openMenu(sideDish)">{{sideDish}}</button>
                            </ion-item>
                        </ion-list>
                      </ion-item>    
                    </ion-item>
                  </ion-card-content>
                </ion-card>
              </ion-item>
            </ion-list>
          </ion-list>
    </div>
  </div>

Ionic 2 documentation only has examples with static data so I really can't find anything that does quite the same. I would gladly appreciate if someone could help me.

Joao Ventura
  • 65
  • 1
  • 11

1 Answers1

0

Ok so, here's what I did to get around it. I used a function that would change the value of my selectedRestaurantIdx variable.

changeMenus(index:number)
{
    this.selectedRestaurantIdx=index;
}

The toolbar:

<ion-toolbar>
  <ion-segment [(ngModel)]="selectedRestaurantIdx">
      <ion-segment-button (click)="changeMenus(i)" *ngFor="let restaus of restaurants; let i = index" [value]="i">
          {{restaus.restName}}
      </ion-segment-button>
  </ion-segment>

And then when I wanted to display the value from only one specific restaurant I'd use:

<ion-list *ngIf="restaurants!=undefined">
    <ion-item *ngFor="let menus of restaurants[selectedRestaurantIdx].restMenus"> (...)
Joao Ventura
  • 65
  • 1
  • 11