Question

当我从json文件中检索数据时，在* ngFor中显示弹出框中的所有值，但我需要一个特定的弹出窗口，仅根据所选/点击武器的数据进行显示。这是我的代码任何帮助将不胜感激。再次感谢您的帮助

主

  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>

Answer 1

Popover不需要再次点击REST调用。您可以将选定的武器作为参数传递给弹出框。

更改您的功能以接受武器（确保您也更改HTML中的代码）

presentPopover(myEvent, weapon)

以这种方式将其发送到popover控制器：

this.popoverCtrl.create(PopupPage, weapon);

现在在你的popup.ts中，取消你班上的武器对象，

weapon : any;

并从构造函数中的navParams中获取武器

this.weapon = this.navParams.data;

更改popup.html中的<ion-item>以显示所选的一个。

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

使用popover显示单击元素的特定数据

1 个答案: