將列表項數據從一頁轉移到另一頁

Question

我正在使用ionic 2，並試圖將數據從一頁轉移到另一頁。 更具體地說，第一頁上的一個列表項（quickSearch）到另一頁上的列表項（quickSearchDetail）。 我下面有一張圖片來演示這一點。

當我單擊一個列表時，它應該將該數據傳輸到下一頁，但是，我遇到一個問題，即無論單擊哪個項目，都僅傳輸第一個列表項（覆蓋本地存儲數據）。

quickSearch模板列表項

<ion-item *ngFor="let item of items" (click)="gotoQuickSearchDetail(item._id)">
  <p id="clusterNameFormValue">{{ item.clusterName }}</p>
  <p id="currentBUNameFormValue">{{ item.currentBUName }}</p>
  <p id="technologyFormValue">{{ item.technology }}</p>
  <p id="customerFormValue">{{ item.Customer }}</p>
  <p id="clusterHeadNumberFormValue">{{ item.clusterHeadNumber }}</p>
</ion-item>

quickSearch.ts

gotoQuickSearchDetail(){
  var clusterName: any = clusterName = document.getElementById("clusterNameFormValue").innerHTML;
  var currentBUName: any = currentBUName = document.getElementById("currentBUNameFormValue").innerHTML;
  var technology: any = technology = document.getElementById("technologyFormValue").innerHTML;
  var customer: any = customer = document.getElementById("customerFormValue").innerHTML;
  var clusterHeadNumber: any = clusterHeadNumber = document.getElementById("clusterHeadNumberFormValue").innerHTML;

  localStorage.setItem('clustername', clusterName);
  localStorage.setItem('currentBUName', currentBUName);
  localStorage.setItem('technology', technology);
  localStorage.setItem('customer', customer);
  localStorage.setItem('clusterHeadNumber', clusterHeadNumber);

  this.navCtrl.setRoot(QuickSearchDetail);
}

quickSearchDetail項目

<ion-list>
    <ion-item>
      <p id="clusternameDetail"></p>
      <p id="currentBUNameDetail"></p>
      <p id="technologyDetail"></p>
      <p id="customerDetail"></p>
      <p id="clusterHeadNumberDetail"></p>
   </ion-item>
</ion-list>

quickSearchDetail.ts

ionViewDidLoad() {
    document.getElementById('clusternameDetail').innerHTML = localStorage.getItem('clustername');
    document.getElementById('currentBUNameDetail').innerHTML = localStorage.getItem('currentBUName');
    document.getElementById('technologyDetail').innerHTML = localStorage.getItem('technology');
    document.getElementById('customerDetail').innerHTML = localStorage.getItem('customer');
    document.getElementById('clusterHeadNumberDetail').innerHTML = localStorage.getItem('clusterHeadNumber');
}

Answer 1

：D太難處理了，但是，您出問題的地方是使用getElementById和id .. and ..東西。 ID是唯一的。 使用*ngFor可以創建更多具有相同ID的元素，這是不允許的。 但是瀏覽器可以應付並返回使用該ID找到的第一個元素，該元素解釋了您所看到的行為。

另一點是localStorage的怪異用法。 這似乎不是您要嘗試做的用例。 我建議您查看角度文檔，尤其是組件間的通信。

簡而言之，您可能應該創建一個包含數組列表的服務。 然后在您的詳細信息頁面上創建一個導航參數，該參數會將ID號保存在服務數組列表中的某個項目上。 在該頁面上，您可以獲取此ID並訪問服務以從項目中獲取正確的數據。

我可以為您編寫所有內容，但這不是正確的網站，這會讓我回到之前提到的建議。 查看有角度的文檔，以了解如何創建主從結構，因為getElementById ， innerHtml和localStorage並非innerHtml之路

Answer 2

嘗試使用這個

//quickSearch Template list item 
<ion-item *ngFor="let item of items" (click)="gotoQuickSearchDetail(item)">
  <p id="clusterNameFormValue">{{ item.clusterName }}</p>
  <p id="currentBUNameFormValue">{{ item.currentBUName }}</p>
  <p id="technologyFormValue">{{ item.technology }}</p>
  <p id="customerFormValue">{{ item.Customer }}</p>
  <p id="clusterHeadNumberFormValue">{{ item.clusterHeadNumber }}</p>
</ion-item>


//quickSearch.ts
gotoQuickSearchDetail(item: any){
  var clusterName: any = clusterName = item.currentBUName;
  var currentBUName: any = currentBUName = item.currentBUName;
  var technology: any = technology = item.technology;
  var customer: any = customer = item.Customer;
  var clusterHeadNumber: any = clusterHeadNumber = item.clusterHeadNumber;

  localStorage.setItem('clustername', clusterName);
  localStorage.setItem('currentBUName', currentBUName);
  localStorage.setItem('technology', technology);
  localStorage.setItem('customer', customer);
  localStorage.setItem('clusterHeadNumber', clusterHeadNumber);

  this.navCtrl.setRoot(QuickSearchDetail);

您有項目循環。 在這種情況下，每個項目都包含相同的ID。 因此，當您嘗試按元素ID查找值時，它始終會為您提供第一項。

Answer 3

您只需要使用navParams 。 您有一個非常認真的創意解決方案，但答案很簡單。 對於我的答案，我將刪除所有ID ，如果樣式需要將其添加回去。 還要注意的一件事是，盡量不要用jquery的心態來接近angular，因為它們是2種不同的動物。

quickSearch模板列表項

 <ion-item *ngFor="let item of items">
   <p>{{ item.clusterName }}</p>
   <p>{{ item.currentBUName }}</p>
   <p>{{ item.technology }}</p>
   <p>{{ item.Customer }}</p>
   <p>{{ item.clusterHeadNumber }}</p>
</ion-item>

因此，在*ngFor有您的列表包裝器。 您只需分配item 。 該item包含您在下一頁上想要的所有數據。 這是您的“包裹”（如果願意）。 現在，您要做的就是將“包”傳遞到下一頁。 而且，我們希望單擊時開始傳遞。

因此，我們將其傳遞給(click)事件。

(click)="gotoQuickSearchDetail(item)"

因此，現在我們只需要在Component文件中添加該方法，然后利用ionic 2中的路由功能，就可以將其發送到下一頁。

gotoQuickSearchDetail(item){
    this.navCtrl.push(QuickSearchDetail, item);  //  Notice the 2nd parameter
}

第二個參數將項目傳遞到第一個參數中聲明的頁面。 因此，現在您將轉到QuickSearchDetail頁面，並將“包裹” item傳遞給您。

現在，當您進入下一頁時，您需要告訴該頁面。“嘿，我有一個名為item “包裝”，它有一些data 。

因此，您可以在QuickSearchDetail組件中添加它。

import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: '...',
  templateUrl: '...html'
})
export class QuickSearchDetailPage {

    itemDetails: any;
    constructor(public navCtrl: NavController, public navParams: NavParams){
        this.itemDetails = this.navParams.data;

        // All the data is now held in the itemDetails variable.
        console.log(this.itemDetails);
    }
}

現在，您已將保存單擊item的數據的“程序包”分配給變量itemDetails ，該變量已“默認”傳遞給navParams.data 。 現在，您可以在視圖中使用itemDetails 。

 {{ itemDetails.PROPERTYHERE }}

---

獎金：

使用終端生成頁面時，您可以免費獲得這些東西。

>_ ionic generate page QuickSearchDetail

navCtrl還具有第三個屬性，該屬性具有動畫選項。 真有趣。

this.navCtrl.push(QuickSearchDetail, item, { 
             animate: true, 
             direction: 'forward', 
             mode: 'ios'});

在此處閱讀有關navCtrl的更多信息
在這里閱讀更多有關navParams的信息

Answer 4

將所有數據添加到您的Click函數和.ts中

  gotoQuickSearchDetail(data:any,datab:any.........){

   navpushhere(SearchPage,{firstPassed:data,secondpassed:datab}); }