CODEWITHSUNDEEP
htmlangulartypescriptionic-framework
Ivas
Ivas

Reputation: 311

Show specific data for the clicked element using popover

when I retrieve data from a json file, in the *ngFor displays all the values in the popover, but I need a specific popover to display based only on the data for selected/clicked weapon. Here is my code any help would be greatly appreciated. Thank you again for your help

Home

  import { Component } from '@angular/core';
    import { NavController, ViewController, PopoverController, Events} from 'ionic-angular';
    import { RestProvider } from './../../providers/rest/rest';
    import { PopupPage } from './../../pages/popup/popup';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
   weapons: any;
   errorMessage: string;

  constructor(public navCtrl: NavController, public rest: RestProvider,
  public popoverCtrl: PopoverController) {
 }
 ionViewDidLoad() {
  this.getweapons();

}
 getweapons() {
   this.rest.getweapons()
      .subscribe(
        weapons => this.weapons = weapons,
        error =>  this.errorMessage = <any>error);



 }

 presentPopover(myEvent)
 {
   let popover = this.popoverCtrl.create(PopupPage);
   popover.present({
     ev: myEvent
   });
 }


}

home.html

<ion-content>
  <ion-searchbar [(ngModel)]="terms"></ion-searchbar>
  <ion-item>

  </ion-item>

  <ion-list>
<button ion-item (click)="presentPopover($event)">
    <ion-item *ngFor="let c of weapons?.weapon_category?.weapons | search : terms">

           <h2>{{c.name}}</h2>
    </ion-item>
        </button>
  </ion-list>
</ion-content>

popup.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, Events} from 'ionic-angular';
import { RestProvider } from './../../providers/rest/rest';
import { HomePage } from './../../pages/home/home';
/**
 * Generated class for the PopupPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-popup',
  templateUrl: 'popup.html',
})
export class PopupPage {
  rangeSettings = 20;
  weapons: any;
   errorMessage: string;
  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public rest: RestProvider) {
    alert('inside the popup');
    }
    close() {
      this.viewCtrl.dismiss();
    }
    getweapons() {
      this.rest.getweapons()
         .subscribe(
           weapons => this.weapons = weapons,
           error =>  this.errorMessage = <any>error);



    }
    ionViewDidLoad() {
     this.getweapons();

   }

}

popup.html

<ion-header>

  <ion-navbar>
    <ion-title>popup</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list>
  <ion-item *ngFor="let c of weapons?.weapon_category?.weapons">
         <h2>{{c.damage.base}}</h2>
         <h2>{{c.damage.chest0}}</h2>
         <h2>{{c.damage.chest1}}</h2>
         <h2>{{c.damage.chest2}}</h2>
         <h2>{{c.damage.chest3}}</h2>
         <h2>{{c.damage.head1}}</h2>
         <h2>{{c.damage.head2}}</h2>
         <h2>{{c.damage.head3}}</h2>

  </ion-item>
  <ion-item>
     <ion-range min="0" max="80" [(ngModel)]="rangeSettings" color="danger"  pin="true" snaps="true" disabled=true></ion-range>
   </ion-item>
</ion-list>

</ion-content>

Upvotes: 0

Views: 322

Answers (1)

DavidX
DavidX

Reputation: 1319

Popover doesn't need to hit the REST call again. You can pass the chosen weapon to the popover as a parameter.

Change your function to accept a weapon (make sure you change the code in the HTML too)

presentPopover(myEvent, weapon)

And send it to the popover controller this way:

this.popoverCtrl.create(PopupPage, weapon);

Now in your popup.ts, decleare a weapon object in your class,

weapon : any;

and grab the weapon from the navParams in your constructor

this.weapon = this.navParams.data;

Change your <ion-item> in popup.html to display the selected one.

<ion-item>
    {{weapon.damage.base}}
    ...
</ion-item>

Upvotes: 1

Related Questions