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

当我从json文件中检索数据时，*ngFor中会显示popover中的所有值，但我需要一个特定的popover来仅基于选定/单击的数据显示。这是我的代码，任何帮助都将不胜感激。再次感谢你的帮助

主页

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


}

从'@angular/core'导入{Component}；
从“ionic angular”导入{NavController、ViewController、PopoverController、Events}；
从“/../../providers/rest/rest”导入{RestProvider}；
从“/../../pages/popup/popup”导入{popupage}；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
武器：任何；
错误消息：字符串；
构造函数（公共navCtrl:NavController、公共rest:RestProvider、，
公共popoverCtrl:PopoverController）{
}
ionViewDidLoad（）{
这个。getwearms（）；
}
获取武器（）{
this.rest.getwearms（）
.订阅(
武器=>这个。武器=武器，
error=>this.errorMessage=error）；
}
presentPopover（myEvent）
{
让popover=this.popooverctrl.create（pouppage）；
流行音乐({
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>

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

{{c.name}}

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

   }

}

从'@angular/core'导入{Component}；
从“ionic angular”导入{IonicPage、NavController、NavParams、ViewController、Events}；
从“/../../providers/rest/rest”导入{RestProvider}；
从“/../../pages/home/home”导入{HomePage}；
/**
*为PoupPage页生成的类。
*
*看https://ionicframework.com/docs/components/#navigation 有关
*爱奥尼亚网页和导航。
*/
@IonicPage（）
@组成部分({
选择器：“页面弹出窗口”，
templateUrl:'popup.html'，
})
出口级POUPPAGE{
范围设置=20；
武器：任何；
错误消息：字符串；
构造函数（公共navCtrl:NavController、公共navParams:navParams、公共viewCtrl:ViewController、公共rest:RestProvider）{
警报（“在弹出窗口内”）；
}
关闭（）{
this.viewCtrl.disclose（）；
}
获取武器（）{
this.rest.getwearms（）
.订阅(
武器=>这个。武器=武器，
error=>this.errorMessage=error）；
}
ionViewDidLoad（）{
这个。getwearms（）；
}
}

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

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

弹出窗口
{{c.damage.base}
{{c.damage.chest0}
{{c.damage.chest1}
{{c.damage.chest2}
{{c.damage.chest3}
{{c.damage.head1}
{{c.damage.head2}
{{c.damage.head3}

Popover无需再次拨打REST电话。您可以将所选武器作为参数传递给popover

更改您的函数以接受武器（确保您也更改了HTML中的代码）

并通过以下方式将其发送到popover控制器：

this.popoverCtrl.create(PopupPage, weapon);

现在，在popup.ts中，清除类中的武器对象

weapon : any;

从构造器中的导航参数中获取武器

this.weapon = this.navParams.data;

在popup.html中更改您的

，以显示所选内容

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

{{武器.伤害.基地}
...

你是救命恩人。一次性解决了我的两个问题。非常感谢。