如何将详细信息传递给从Firebase收到的<ion-item>，并点击另一页Ionic 3？

问题描述：

我开始用Ionic和AngulaJS开发我的项目，并且遇到问题。如何将详细信息传递给从Firebase收到的<ion-item>，并点击另一页Ionic 3？

我通常在“离子项目”（如名称，图像和详细信息）中获取Firebase数据。

我需要显示在另一页上单击的“uid”的详细信息。

我该怎么做？

非常感谢你，如果你帮我。

这是我的 “离子项目”

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ion-list *ngFor="let key of filteredusers"> 
 
    <ion-item> 
 
    <ion-thumbnail item-start> 
 
     <img src="{{key.photoURL}}"> 
 
    </ion-thumbnail> 
 
    <h3>{{key.displayName}}</h3> 
 
    <p>{{key.detalhes}}</p> 
 
    <button ion-button round item-end>Ver Ofertas</button> 
 
    </ion-item> 
 
</ion-list>

显示数据从火力收到：

你是什么意思的页面？如果你指的是另一种观点，那么你可以传递一个服务来交换数据。 – Claudiu

我已经有一个空的查看页面。我想移动点击它的物品的细节 –

您使用的是angularjs还是angular？ –

答

你只需做一个服务，用于存储UID和当用户点击listing page中的列表项并将其置于detail page中时，请设置它。我在这里假设您在filteredusers阵列中有uid，可以通过key.uid访问该阵列，然后您需要对firebase进行API调用以获取该特定uid的数据。

listing.component.html：

<ion-list *ngFor="let key of filteredusers"> 
    <ion-item> 
     <ion-thumbnail item-start> 
      <img src="{{key.photoURL}}"> 
     </ion-thumbnail> 
     <h3>{{key.displayName}}</h3> 
     <p>{{key.detalhes}}</p> 
     <!-- REDIRECT USER TO DETAIL PAGE --> 
     <button ion-button round item-end (click)="redirectToDetailPage(key.uid)">Ver Ofertas</button> 
    </ion-item> 
</ion-list>

listing.component.ts：

... 

redirectToDetailPage(uid) { 
    // This is how we store it in service 
    this.commonService.currentUID = uid; 
    this.navCtrl.push(DetailPage); 
} 

...

detail.component.ts：

... 

ionViewWillEnter() { 
    this.http.post(this.firebaseURLYouKnow , { 
     // pass uid of user clicked from listing page in API call 
     uid: this.commonService.currentUID 
    }) 
} 

...

common.service.ts：

import { Injectable } from '@angular/core'; 

@Injectable 
export class commonService { 
    public commonService: string; 
}

您可以了解更多有关的服务，以及如何使用它们here

答

嗨，以便从一个视图中的数据传递到另一个你可以使用NavController NavController通过。每当您推送视图时，都要传递第二个参数作为传递给推送视图的对象。

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
    <!--define a click event and pass the index of item clicked> 
<ion-list *ngFor="let key of filteredusers; let i =index"> 
    <ion-item (click)="navigateTopage(index)"> 
    <ion-thumbnail item-start> 
     <img src="{{key.photoURL}}"> 
    </ion-thumbnail> 
    <h3>{{key.displayName}}</h3> 
    <p>{{key.detalhes}}</p> 
    <button ion-button round item-end>Ver Ofertas</button> 
    </ion-item> 
</ion-list>

在您的TS文件

 //function in your ts class 
    navigateTopage(index) 
    { 
     let filteredItem= this.filteredusers[index]; 
     //navigating to other page. navControl is type of NavController 
     this.navContrl.push(<pageName>{ 
     'filteredItem': filteredItem 
     }) 

    }

在您的其他详细信息页面，您可以通过使用获得推对象：

//key is same as we passed from previous page. 
    this.navParams.get('filteredItem');

快乐的帮助：）

如何将详细信息传递给从Firebase收到的，并点击另一页Ionic 3？

相关推荐