angular2 http请求重复多次

Question

今天我用angular 2写了一个http请求。我得到了服务中的数据，但我得到undefinded在component。我不知道如何解决它，请给我一些帮助。

服务

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（数据）

的console.log（RES）

部件

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> 

Answer 1

每次角所调用变化检测，getAdmin()被调用，以检查它是否会返回一个不同的值作为最后的时间。

有不同的方法来解决这种情况

• 可以缓存在服务中的数据，并立即返回它时，已经可以在What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

• 解释您可以拨打getAdmins()在构造函数，将其分配给一个属性，并绑定到该属性。

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; 
     }); 
    }