名前をクリックするとイオンプロジェクトでその詳細を表示したい

Question

私はオブジェクトの配列を含むrestapi（api url： 'http://rayi.in/dms-danish/api/loadUsers/1）を持っています。 apiから私は特定の人をクリックした人の名前を一覧表示しています。私はモーダルでその詳細を表示しています。 私はAPIの名前をリストアップしていますが、特定の人物をクリックするとすべてのユーザーの詳細が表示されます。

配列[オブジェクト、オブジェクト、オブジェクト]

オブジェクト{ID： "84"、u_name： "ジュリー"、u_email： "herlev@ide.dk"、u_phone_number： "88183640"、u_password：「NULL "}

オブジェクト{ID： "85"、u_name： "ブライアン"、u_email： "glostrup@ide.dk"、u_phone_number： "88183730"、u_password： "NULL"}

オブジェクト{ID： u_phone_number： "88183730"、u_password： "null"}

"86"、u_name： "Alexande T. Abedi"あなたのVendorModalPageで

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

、あなたがデータを取得する方法は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 
}