Ионный сегмент ngFor Ionic 2 с данными модели

Question

Я недавно начал использовать Ionic 2, на одной из моих страниц PWA должна отображаться информация о меню недели из разных ресторанов.

То, что я пытаюсь сделать, это иметь ионный сегмент с кнопкой для каждого из этих ресторанов, что позволит мне переключать содержимое моей страницы между меню каждого ресторана.

Ниже приводится важная часть моего файла html. Проблескомая линия - <ion-list *ngSwitchCase=restaus.restName>. Я попробовал кучу разных способов написать его, и я не могу заставить его работать (с двойными скобками и с «символами»).

По умолчанию на странице отображаются только результаты из ресторана «MISERICORDE», но нажатие на отрезках ничего не делает.

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>

ионные 2 документация имеет только примеры со статическими данными, так что я действительно не могу найти ничего, что делает совсем то же самое. Я бы с удовольствием признательны, если кто-то может мне помочь.

Answer 1

Итак, вот что я сделал, чтобы обойти его. Я использовал функцию, которая изменила бы значение моей выбранной переменной RestaurantIdx.

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

Панель инструментов:

<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> 

А потом, когда я хотел, чтобы отобразить значение из только один конкретного ресторана я бы использовать:

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