Question

我正在制作一个事件页面，其中在事件页面中成功显示了一个事件。现在，我想在下一页显示该特定单击事件的详细信息，但现在它在每个事件中显示整个事件的详细信息。

到目前为止，我的代码已经完成了。

EventsPage.html

int right=0, int right=INT_MAX

这是我的EventsPage.ts

     <ion-content> 
     <ion-card *ngFor="let show of events" style="cursor:pointer">
<ion-list (click)="details()">
  <!--<ion-row>
    <ion-item style="cursor:pointer;border-bottom:1.5px solid #bbd164 !important">{{show.date}}
    </ion-item>
  </ion-row>-->
  <ion-row style="border-bottom:1.5px solid #bbd164 !important">
    <ion-col col-7 style="cursor:pointer;color:#bbd164 !important;font-size: 12px;"><b>{{show.date}}</b></ion-col>
    <ion-col col-5 style="cursor:pointer;color:#bbd164 !important;font-size: 12px;"><b>{{show.timing}}</b></ion-col>
  </ion-row>
  <ion-row>
    <ion-item style="cursor:pointer"><b>{{show.title}}</b></ion-item>
  </ion-row>
  <ion-row>
    <ion-item>{{show.description}}</ion-item>
  </ion-row>
   <ion-row>
     <ion-col col-6 padding style="color:#bbd164 !important"></ion-col>
     <ion-col col-1 ></ion-col>
    <ion-col  col-5 padding style="text-align: right;color:#bbd164 !important">{{show.category}}</ion-col>
  </ion-row>
</ion-list>
</ion-card>
 </ion-content>

此代码已成功显示此页面中的事件。现在，我想在下一页显示特定单击事件的详细信息。

Answer 1

在html中：

<ion-card *ngFor="let show of events">
   <div (click)="details(show)"> details </div> 
</ion-card>

在组件中：

public details(selectedDetail:any){
   console.log(JSON.stringify(selectedDetail)); 
}

运行代码，然后在浏览器中检查控制台。

显示单击的项目详细信息，而不是整个数组列表

1 个答案: