如何將詳細信息傳遞給從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>

顯示數據從火力收到：

來源

2017-07-15 Gabriel Ramos

你是什麼意思的頁面？如果你指的是另一種觀點，那麼你可以傳遞一個服務來交換數據。 – 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

來源

2017-07-15 05:36:10 Dhyey

嗨，以便從一個視圖中的數據傳遞到另一個你可以使用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');

快樂的幫助：）

來源

2017-07-15 05:52:20

如何將詳細信息傳遞給從Firebase收到的<ion-item>，並點擊另一頁Ionic 3？

回答

相關問題