角度服務承諾

-1

我已經創建了服務從服務器獲取數據，但我無法弄清楚如何檢索我的控制器中解析的數據。角度服務承諾

這裏的服務：

在組件/控制器

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

    constructor(private userService: UserService) {} 

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

我想這個問題與我做恢復功能「獲取」本身，而不是解決數據。但我無法找出正確的方法去做。

來源

2017-06-19 user2915962

你錯過了'return'。它應該是'return response.json（）' – Phil

另外，你正在爲用戶分配一個承諾。你可能不想這樣試試'this.userService.getUsers（）。then（users => this.users = users）' – Phil

@Phil也許他/她想要在模板中使用'async'管道:) –

也許你需要的東西是這樣的：

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管模板：

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

如果你不這樣做想用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>

來源

2017-06-19 08:21:38

謝謝！如果我希望將數據直接發送到視圖（在這種情況下是正確的），這將起作用。我不知道我必須在視圖中使用管道。但是讓我們說我想先對我的控制器裏面的數據做些什麼？ – user2915962

讓我們看看我上面更新的答案。 –

非常感謝！ – user2915962

我們缺少返回響應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調用，所以把結果放在裏面。

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

    constructor(private userService: UserService) {} 

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

來源

2017-06-19 08:23:41

角度服務承諾

回答

相關問題