離子角中的離子選擇

我想選擇一個餐廳名稱，然后我選擇它以在頁面上只顯示該餐廳的食物，但它不起作用。從串列中選擇一家餐廳后，沒有任何反應。

這是我的.html檔案：

  <ion-item class="restaurant">
    <ion-label>Restaurant</ion-label>
    <ion-select class="RestaurantSelect" [(ngModel)]="restaurant">
      <ion-select-option *ngFor="let restaurant of restaurants" [value]="restaurant">
        {{restaurant.name}}
      </ion-select-option>
    </ion-select>


  <ion-list>
  <ion-item lines="none" *ngFor="let f of restaurant; let i=index">
<!--    <ng-container *ngFor="let f of rest">-->
    <ion-thumbnail slot="start">
      <ion-img [src]="f.photo"></ion-img>
    </ion-thumbnail>

    <ion-label>{{f.food.name}}
      <ion-buttons>
        <ion-button  color="dark">Edit
          <ion-icon slot="start" name="create"></ion-icon>
        </ion-button>
        <ion-button color="dark" (click)="remove(i)">Delete
          <ion-icon slot="start" name="trash"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-label>
<!--    </ng-container>-->

  </ion-item>

  </ion-list>

  </ion-item>
</ion-content>

我確實宣告了一個陣列陣列：每家餐廳都有更多型別的食物，而且食物也有更多欄位，如名稱、描述、價格等，這就是我在.ts檔案中宣告陣列的方式：

  restaurants: any[] =[
    {
      id:1,
      name: 'Restaurant1',
      food:[
        {
          id:1,
          name:'Burger',
          description:'good',
          price:10, 
          photo:'img1.jpg',
        },
        {
          id:2,
          name:'Pizza',
          description:'nice',
          price:20,
          photo:'img2.jpg',
        },
      ]
    },
    {
      id:2,
      name: 'Restaurant2',
      food: [{
        id:3,
        name:'Burger',
        description:'good',
      },
        {
          id:4,
          name:'Ice',
          description:'nice',
        },],
    },
  ] ```

What am I doing wrong? Thank you for your responses!

uj5u.com熱心網友回復：

在模板中試試這個：

<ion-item>
    <ion-label>Restaurant</ion-label>
    <ion-select [(ngModel)]="chosenRestaurantIdx">
      <ion-option *ngFor="let restaurant of restaurants; let i = index" [value]=i>
        {{ restaurant.name }}
      </ion-option>
    </ion-select>
</ion-item>

<ng-container *ngIf="chosenRestaurantIdx != null">
    <ng-container *ngFor="let food of restaurants[chosenRestaurantIdx].food; let i = index">

        <ion-thumbnail slot="start">
            <img [src]="food.photo"/>
        </ion-thumbnail>

        <ion-label>{{ food.name }}</ion-label>
        <ion-button color="primary" (click)="edit(i)">Edit
            <ion-icon slot="start" name="create"></ion-icon>
        </ion-button>
        <ion-button color="dark" (click)="remove(i)">Delete
            <ion-icon slot="start" name="trash"></ion-icon>
        </ion-button>

    </ng-container>        
</ng-container>

并為 ts 引入一個 var：

chosenRestaurantIdx: number = null;

添加方法到 ts 作為編輯/洗掉按鈕點擊的占位符：

edit(index){
    console.log("edit index:",index);
  }

  remove(index){
    console.log("delete index:",index);
  }

最后，當然，您必須對所有內容進行樣式設定。

uj5u.com熱心網友回復：

使用每次更改選擇選項后觸發的離子更改事件。模板：

<ion-select [(ngModel)]="chosenRestaurantIdx" (ionChange)='selectionChanged($event)'>
  <ion-option *ngFor="let restaurant of restaurants; let i = index" [value]=i>
    {{ restaurant.name }}
  </ion-option>
</ion-select>

打字稿：

selectionChanged(data:any){
let newSelection = data.detail.value;
// add your code logic here
}

標籤：

上一篇：如何正確設定webhook端點API以使用Firebase函式處理RevenueCat事件？

下一篇：如何在新列中添加原始日期的天數