ionic2 return “__zone_symbol__state: null, __zone_symbol__value: Array(0)”

在ionic2中使用Promise來GET背景資料時傳回如下資訊，明顯這串資料不能賦予變量使用（實際發現一般方式也很難取出Promise傳回的資料，如return、指派等）

先看Promise代碼：

getTasks(){
    var url = APP_SERVE_URL+'products/1';
    return new Promise((resolve, reject) => {
      this.http.get(url)
        .map(res => res.json())
        .subscribe((taskDetails:TaskDetails) => {
          resolve(taskDetails);
          console.log(taskDetails.Name);
          console.log('succeed!');
          return(JSON.stringify(taskDetails));
        }, err => {
          reject(err);
        })
    })
  }
           

constructor{}中調用getTasks的代碼：

this.getTasks().then(taskDetails=>{
      console.log(taskDetails);
    });
    this.globalData.task = this.getTasks();
    console.log(this.globalData.task);
           

可以發現console.log(taskDetails)和console.log(this.globalData.task)列印的資料相同，但前者是正常的，如下

不過兩者都不能通過一般的方式将Promis傳回的資料賦予變量使用（本文暫不讨論兩者為何不同），這對于想使用Promise傳回資料來綁定頁面元件顯示在app中的人來說估計很郁悶，本文提供了一種簡單的方式來傳回Promise可供取用（retrieve）的資料。首先我們應該知道Promise是一種異步工作方式（詳見JavaScript Promise：簡介），這也就是為什麼不能直接在Promise外使用變量來擷取它傳回的資料，下面這種方式讀者可以試下：

getTasks1(): Promise<any>{
    var url = APP_SERVE_URL+'products/1';
    return this.http.get(url)
      .map(res => res.json())
      .toPromise();
  }
           

this.getTasks1().then(task =>{
      console.log(`Returned: ${task}`);
      this.WorkOrder = task;
      console.log(this.WorkOrder);
    });
           

然後在html中綁定WorkOrder獲得的資料看該變量是否成功retrieve data

<div>
    <ion-title><strong>所有工單</strong></ion-title>
    <ion-item>
      <ion-label fixed>負責人</ion-label>
      <ion-input type = "text" [(ngModel)] = "WorkOrder.Name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>節點編碼</ion-label>
      <ion-input type="text" [(ngModel)]="WorkOrder.NodeId"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>節點資訊</ion-label>
      <ion-input type="text" [(ngModel)]="WorkOrder.NodeInfo"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>緊急程度</ion-label>
      <ion-input type="text" [(ngModel)]="WorkOrder.Category"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>類型</ion-label>
      <ion-input type="text" [(ngModel)]="WorkOrder.TaskType"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>工分</ion-label>
      <ion-input type="number" [(ngModel)]="WorkOrder.Price"></ion-input>
    </ion-item>
  </div>
           

可以看到

說明該變量成功retrieve data，大家不妨試下這種方式來獲得plain data，查資料似乎使用async和await方式也能成功（畢竟Promise是異步工作的）。