2016-06-13 91 views
2

今天我用angular 2寫了一個http請求。我得到了服務中的數據,但我得到undefindedcomponent。我不知道如何解決它,請給我一些幫助。angular2 http請求重複多次

服務

export class AdminStoreService { 
    data:Object; 

    constructor(http:Http) { 
     this.http = http; 
    } 

    findAll() { 
    return this.http 
     .get('/data/admin.json') 
     .map((res:Response) => { 
      console.log(data); //can get the json data 
      this.data = res.json(); 
     }); 
} 

}

的console.log(數據)

enter image description here

的console.log(RES) enter image description here

部件

export class AdminComponent { 
admins:Object; 

constructor(adminStore:AdminStoreService) { 
    this._adminStore = adminStore; 
    this._adminStore.findAll().subscribe(data => this.admins = data); 
    console.log(this.admins); // undefined 
} 

}

模板無法獲得數據

  <section *ngIf="admins"> 
       <tr *ngFor="let admin of admins" class="animated fadeInRight"> 
        <td>{{admin.username}}</td> 
        <td class="alert">{{admin.authLevel}}</td> 
        <td>{{admin.operator}}</td> 
        <td>{{admin.created | dateFormat:'YYYY-MM-DD HH:mm:ss'}}</td> 
        <td>{{admin.updated | dateFormat:'YYYY-MM-DD HH:mm:ss'}}</td> 
       </tr> 
      </section> 
+0

哪裏或你怎麼罵'getAdmins()'? –

+0

在模板中,我使用* ngFor – xiaomo

+0

源代碼在github上:https://github.com/nodejs-study/node-koa/tree/master/web/admin – xiaomo

回答

0

每次角所調用變化檢測,getAdmin()被調用,以檢查它是否會返回一個不同的值作爲最後的時間。

有不同的方法來解決這種情況

export class AdminComponent { 
    constructor(adminStore:AdminStoreService) { 
     this._adminStore = adminStore; 
     this._adminStore.findAll().subscribe(data => this.admins = data); 
    } 
} 

的服務也沒有工作,它的構建方式。它應該像

export class AdminStoreService { 
    data:Object; 

    /** 
    * 構造函數 
    */ 
    constructor(http:Http) { 
    this.http = http; 
    } 

    findAll() { 
    return this.http 
     .get('/data/admin.json') 
     .map(res:Response => res.json()); 
    } 
} 

更新

獲取調試輸出

findAll() { 
    return this.http 
     .get('/data/admin.json') 
     .map(res:Response => res.json()) 
     .map(data => { 
      console.log(data); 
      return data; 
     }); 
    } 
+0

我將代碼更改爲服務中的代碼,但出現TypeError錯誤:this.http.get(...)。map不是函數 – xiaomo

+0

http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error -http-get-map-is-a-function-in –

+0

'this.admins'只在'data => this.admins =數據「被執行。這就是我修改你的findAll()方法的原因。 'data => this.admins = data'是傳遞給'subscribe'的回調函數。當服務器最終響應時,該回調將被執行。您可能希望在模板周圍添加'

...
'或使用'admins?.someProp'來避免'this.admins'尚未設置時發生錯誤。 –