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

Question

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

这是我到目前为止完成的代码。

EventsPage.html

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

这是我的EventsPage.ts

export class EventsPage {
 index: any;
 categories_list: any;
 timeArray: any[];
 phone: any;
 pic_url: any;
 timing: any;
 category: any;
 email: any;
 description: any;
 website: any;
 address: any;
 title: any;
 date: any;
 events: any;
 selectOptions: { title: string; subTitle: string; mode: string; };
 readMoreFlag: boolean;
 noCategory: boolean;
 events_array: any;

 constructor(public http: Http, public ServerUrl: RemoteServiceProvider, 
  public navCtrl: NavController, public navParams: NavParams) {
   this.showEvents();

 }

showEvents() {
 this.ServerUrl.showEventDetails()
  .then(data => {
    this.events = data;
    console.log("events:", this.events);
    this.noCategory = false;
    this.events.forEach(element => {
      element.readMoreFlag = false;
      element.contentFlag = false;
      this.pic_url = element.pic_url;
      console.log("pic_url", this.pic_url);
    });

    this.timeArray = this.events;


  });

}

details(eventGet: any[]) {
  for (var value of this.events) {
  // console.log(value);
  console.log("1", value.pic_url);
  console.log("1", value.date);
  console.log("1", value.timing);
  console.log("1", value.address);
  console.log("1", value.description);
  console.log("1", value.phone);
  console.log("1", value.email);
  console.log("1", value.website);
}

this.navCtrl.push(EventsDetailPage, { });
// Here i want to push some clicked event details to show in next page.Like pic_url, title, address, phone etc. 
}


}

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

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)); 
}

运行代码并在浏览器中检查您的控制台。

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

Show Clicked Item details instead of whole array list

ionic3

angular5