角度サービス約束

Question

サーバーからデータを取得するサービスを作成しましたが、コントローラで解決されたデータを取得する方法がわかりません。私は問題が機能「フェッチ」自体の代わりに、解決したデータを返す私と関係していると思いコンポーネントで

​​

/コントローラ

export Class UserComponent implements OnInit { 
    users: any[]; 

    constructor(private userService: UserService) {} 

    ngOnInit() { 
    this.users = this.userService.getUsers(); 
    } 
} 

：ここ

はサービスです。しかし、私はそれについて正しい方法を理解することはできません。

Answer 1

たぶん、あなたはこのようなものが必要です。そうしない場合は

<div *ngFor="let user of users | async"> 
    <span>Maybe print username: {{user.name}}</span> 
</div> 

：あなたのコンポーネントで

export class UserService { 

    getUsers() { 
     return fetch('http://localhost:8000/api/users') 
     .then(function(response) { 
      console.log(response); 
      return response.json(); 
     }); 
    } 
} 

：

export class UserComponent implements OnInit { 
    users: any; 

    constructor(private userService: UserService) {} 

    ngOnInit() { 
    this.users = this.userService.getUsers(); 
    } 
} 

、テンプレートでasyncパイプを使用してasyncパイプを使用します。

コンポーネントのコード：

export class UserComponent implements OnInit { 
    users: any; 

    constructor(private userService: UserService) {} 

    ngOnInit() { 
    this.userService.getUsers().then(data => { 
     // do something with response data 
     console.log(data); 
     this.users = this.someMethodToTransformResponse(data); 
    }); 
    } 
    someMethodToTransformResponse(data) { 
    // return modification your data 
    } 
} 

とテンプレート：

<div *ngFor="let user of users"> 
    <span>Maybe print username: {{user.name}}</span> 
</div> 

Answer 2

我々は内部そして約束の復帰応答JSONを逃しています。

export class UserService { 

    getUsers() { 
     let data = []; 
     return fetch('http://localhost:8000/api/users') 
      .then(function(response) { 
       console.log(response); //Response gets logged 
       return response.json(); 
      }) 
      .then(function(data) { 
       console.log(data); //Data gets logged 
       return data; 

      }) 
     }; 
    ... 

getUsersサービスはAjaxコールであり、結果をputします。

export Class UserComponent implements OnInit { 
    users: any[]; 

    constructor(private userService: UserService) {} 

    ngOnInit() { 
    this.userService.getUsers().then(users => { 
     this.users = users; 
    }); 
    } 
}