Показать сведения о выбранном элементе вместо всего списка массивов

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

Запустите код и проверьте вашу консоль в браузере.