点击离子行

Question

我有使用循环值创建的离子行。在那个循环中，当我单击我想打开另一行但代替特定行的开头行时，所有行都打开了。

 <ion-grid [hidden]="!destination" (click)="onButtonClick()" *ngFor="let vehicle of vehicles; let i = index" [ngClass]="{'active': vehicle.active}"
    (click)="chooseVehicle(i)"  >

  <ion-row class="card" >
    <ion-col> <img src="{{ vehicle.icon }}"> </ion-col>
    <ion-col> <p class="carName">{{ vehicle.name }}</p> </ion-col>
    <ion-col> <p class="carSeats">{{ vehicle.seats }} seats</p> </ion-col>
<!--    <ion-col> <p class="carPrice">{{currency }}{{ vehicle.fee_taxed }}</p> </ion-col> -->

 </ion-row>
 <ion-row *ngIf="buttonClicked">
     <ion-col><p class="carPrice">{{ vehicle.name }}</p></ion-col>
     <ion-col> <p class="carSeats">{{ vehicle.seats }} seats</p> </ion-col>
     
</ion-row>
 
</ion-grid>

As you can see in image rows for both sedan and SUV is opening in down I only want to open one which is selected please guide me

Answer 1

我对 ionic 了解不多，但是当我阅读文档和 HyperCreeck 评论时，您可以在 html 文件上执行类似的操作：

<ion-grid *ngFor="let vehicle of vehicles; let i = index">
  <ion-row (click)="showDetail(vehicle)">
    <ion-col> {{ vehicle.name }} </ion-col>
    <ion-col>{{ vehicle.seat }} seats</ion-col>
  </ion-row>

 <ion-row *ngIf="vehicle.show">
     <ion-col>{{ vehicle.name }}</ion-col>
     <ion-col>{{ vehicle.seat }} seats</ion-col>
     <ion-col>{{ vehicle.price }}</ion-col>
  </ion-row>
 
</ion-grid>

在 ts 文件上：

//I assume your data something like bellow 
     vehicles = [
        {
          'name' : 'sedan' ,
          'seat' : '4',
          'price': '¥100.000'
        },
        {
          'name' : 'suv',
          'seat' : '4',
          'price': '¥100.000',
        },
        {
          'name' : 'ferari',
          'seat' : '2',
          'price': '¥100.000',
        }
      ]

constructor(){
    for (let index = 0; index < this.vehicles.length; index++) {
      const element = this.vehicles[index];
      element['show'] = false;
    }
  }

showDetail(item: any) {
    if (item.show == true) {
      item.show = false;
    } else {
      item.show = true;
    }
  }

Answer 2

您也可以按照以下方式进行操作：

<ion-grid [hidden]="!destination" *ngFor="let vehicle of vehicles; let i = index" [ngClass]="{'active': vehicle.active}"
 >

<ion-row class="card"  (click)="chooseVehicle(i)">
<ion-col> <img src="{{ vehicle.icon }}"> </ion-col>
<ion-col> <p class="carName">{{ vehicle.name }}</p> </ion-col>
<ion-col> <p class="carSeats">{{ vehicle.seats }} seats</p> </ion-col>
<!--    <ion-col> <p class="carPrice">{{currency }}{{ vehicle.fee_taxed }}</p> 
</ion-col> -->

</ion-row>
 <ion-row *ngIf="i == selectedVechicleIndex">
 <ion-col><p class="carPrice">{{ vehicle.name }}</p></ion-col>
 <ion-col> <p class="carSeats">{{ vehicle.seats }} seats</p> </ion-col>
 
  </ion-row>

  </ion-grid>

在 ts 文件上执行如下操作：

首先，将上面的一个变量带到构造函数中：

 selectedVechicleIndex = 0

然后

  chooseVehicle(i){
  if(i == this.selectedVechicleIndex){

  this.selectedVechicleIndex = 0
  } else {
  this.selectedVechicleIndex = i
  }   
  }

使用上面的代码，您可以根据需要显示和隐藏行。