如何通过单击 Ionic 3 上的另一个页面将详细信息传递到从 Firebase 收到的 <ion-item>？

Question

我开始使用 Ionic 和 AngulaJS 开发我的项目，但我遇到了问题。

我通常在 "ion-item" 中获取 Firebase 数据，例如（名称、图像和详细信息）。

我需要显示在另一个页面上点击的 "uid" 的详细信息。

我该怎么做？

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

这是我的"ion-item"

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

显示从 firebase 接收到的数据：

Answer 1

您只需创建一个用于存储 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

Answer 2

您好，为了将数据从一个视图传递到另一个视图，您可以使用 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');

乐于助人:)

如何通过单击 Ionic 3 上的另一个页面将详细信息传递到从 Firebase 收到的 <ion-item>？

How to pass details into <ion-item> received from Firebase with a click to another page on Ionic 3?

firebase

firebase-realtime-database

ionic3

angular