angular - 单击我想在 ionic 项目中显示其详细信息的名称

Question

我有一个包含对象数组的 restapi (api url:' http://rayi.in/dms-danish/api/loadUsers/1)。 从 api 中，我列出了单击特定人时的人名，我在模式中显示了他们的详细信息。 我已经列出了 api 中的名称，但是在单击特定的人时它会显示所有用户的详细信息我该如何修复它。

数组 [对象, 对象, 对象]

对象 { id: "84", u_name: "Julie", u_email: "herlev@ide.dk", u_phone_number: "88183640", u_password: "null"}

对象 { id: "85", u_name: "Brian", u_email: "glostrup@ide.dk", u_phone_number: "88183730", u_password: "null"}

对象 { id: "86", u_name: "Alexande T. Abedi", u_email: "alta@ide.dk", u_phone_number: "88183730", u_password: "null"}

import { VendorModalPage } from './../vendor-modal/vendor-modal';
import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { IonicPage, ViewController, ModalController, NavParams } from 'ionic-angular';



@IonicPage()
@Component({
  selector: 'page-vendors',
  templateUrl: 'vendors.html',
})
export class VendorsPage {

  vendors: any[];

  constructor(public viewCtrl: ViewController,
              public modal: ModalController,
              public navParams: NavParams,
              public http: Http) {
              http.get('http://rayi.in/dms-danish/api/loadUsers/1')
                .subscribe(response => {
                  this.vendors = response.json();
                })
              }

  ionViewDidLoad() {
    console.log('ionViewDidLoad VendorsPage');
  }

  // checkVendor(){}
  openModal() {
    const myModal = this.modal.create(VendorModalPage);
    myModal.present();
  }
}

<ion-header>

  <ion-navbar>
    <ion-title>vendors</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <button ion-button block (click)="openModal()" *ngFor="let vendor of vendors">  
      <ul>
        <li>
            {{vendor.u_name}}
        </li>
      </ul>
    </button>
  </ion-list>
</ion-content>

import { Http } from '@angular/http';
import { VendorsPage } from './../vendors/vendors';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
 

@IonicPage()
@Component({
  selector: 'page-vendor-modal',
  templateUrl: 'vendor-modal.html',
})
export class VendorModalPage {

  vendors:any[];
  venDetails:any;

  constructor(public viewCtrl: ViewController,
              public navParams: NavParams,
              public http: Http)
              {
                http.get('http://rayi.in/dms-danish/api/loadUsers/1')
                .subscribe(response => {
                this.vendors = response.json();
              
                })
              }

  ionViewDidLoad() {
    console.log('ionViewDidLoad VendorModalPage');
  }

  closeModal() {
    this.viewCtrl.dismiss();
  }

    

}

 <ion-header>

  <ion-navbar>
    <ion-title>Vendor Details</ion-title>
  </ion-navbar>
  <ion-buttons>
    <button ion-button small color="danger" (click)="closeModal()">&#x274C;</button>
  </ion-buttons>
</ion-header>



<ion-content padding>
  <ul *ngFor="let vendor of vendors; index as i">
    <li *ngIf="">
      Name: {{vendor.u_name}}
      <br> 
      Id: {{vendor.id}}
      <br> 
      Email: {{vendor.u_email}}
      <br> 
      Phone Number: {{vendor.u_phone_number}}
    </li>
  </ul>
</ion-content>

Answer 1

在您的VendorModalPage 中，获取数据的方式与VendorsPage 相同。所以你肯定会得到所有的数据。只需执行简单的方法，将您的 object 传递给 NavParams。
在 vendors.html 中:

<button ion-button block (click)="openModal(vendor )" *ngFor="let vendor of vendors">  

在 VendorsPage 中:

 openModal(vendor) {
    const myModal = this.modal.create(VendorModalPage, {vendor: vendor});<== Here is the way you pass data
    myModal.present();
 }

在 VendorModalPage 中:

 constructor(public viewCtrl: ViewController,public navParams: NavParams){
    this.venDetails = this.navParams.get('vendor');
   //Now you have venDetails  in your hand. Just use it to show data
 }