在Ionic 2中無法從Http訪問數據

Question

我正在嘗試在Ionic 2中使用HTTP從Blogspot API獲取數據。

這是我創建的用於與HTTP和組件交互的服務。

  **HttpService.ts**

 export class Serverdata {
  constructor(private http: Http) { }

  getData() {
   return this.http.get(this.blogUrl)
    .map(
    (response: Response) => {
     const datas = response.json();
     return datas;
     }
    );
   }
 }

這是我創建的用於測試數據的組件。

  **Component.ts**

    constructor(public navCtrl: NavController, public navParams: 
                NavParams, private httpData : Serverdata) {}

        serverDataCall(){
           this.httpData.getData().subscribe(
           (datas) => console.log(datas),
           (error) => console.log(error)
           );
        }

這是組件模板

  **Component template**

    <ion-content padding>
    <button ion-button (click) = "serverDataCall()" > get </button>
    </ion-content>

當我單擊按鈕時，它在控制台中顯示了一個類似這樣的對象，

            Object {kind: "blogger#postList", 
             nextPageToken:"CgkIChihsOeVtioQo9Cj3-vl17BF", 
             items: Array(10), 
             etag: 
    ""h3phi6z0oROkI1XWpXsALUFHLuA/MjAxNy0wMy0zMVQwMjoxMzowNy45Mjda""}
     etag:
     ""h3phi6z0oROkI1XWpXsALUFHLuA/MjAxNy0wMy0zMVQwMjoxMzowNy45Mjda""
          items:Array(10)
           0:Object
           1:Object
           2:Object
           3:Object
           4:Object
           5:Object
           6:Object
           7:Object
           8:Object
           9:Object
           length:10
           kind:"blogger#postList"

每個對象項中都有諸如標題和內容之類的元素。 但是，我無法檢索其中任何一個。

我試過了，但是沒用！

      serverDataCall(){
           this.httpData.getData().subscribe(
           (datas : any []) => this.data = datas, //changed this line 
           (error) => console.log(error)
           );
          }

在模板中

        <ion-content padding>
        <button ion-button (click) = "serverDataCall()" > get 
         lyrics</button>
           <ion-grid>
            <ion-row *ngFor="let data of datas">
             <ion-col>
              {{data.title}}
             </ion-col>
            </ion-row>
           <ion-grid>
        </ion-content>

沒事！ 它給了我諸如未定義的錯誤！

Answer 1

您之所以變得不確定，是因為視圖是在接收數據之前加載的，並且*ngFor最初獲取的是undefined datas 。

在網格中使用*ngIf來確保在接收到數據后加載循環。 就像@echonax建議的那樣，它應該遍歷所有items 。

 <ion-content padding>
        <button ion-button (click) = "serverDataCall()" > get 
         lyrics</button>
           <ion-grid *ngIf="datas && datas.items">
            <ion-row *ngFor="let data of datas.items">
             <ion-col>
              {{data.title}}
             </ion-col>
            </ion-row>
           <ion-grid>
        </ion-content>

Answer 2

 serverDataCall(){
       this.httpData.getData().subscribe(
       (datas : any []) => this.data.items = datas, //you can either do this and keep the the template code the same  
       (error) => console.log(error)
       );
      }

第二路

    <ion-content padding>
    <button ion-button (click) = "serverDataCall()" > get 
     lyrics</button>
       <ion-grid>
        <ion-row *ngFor="let data of datas.items"> // or change it in the template and leave the service method unchanged
         <ion-col>
          {{data.title}}
         </ion-col>
        </ion-row>
       <ion-grid>
    </ion-content>