Angular 角度服务承诺

我创建了一个从服务器获取数据的服务，但我不知道如何在控制器中检索已解析的数据

服务内容如下：

export class UserService {

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

            })
        };
    ...

在组件/控制器中

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

  constructor(private userService: UserService) {}

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

---

我想问题在于我返回函数“fetch”本身，而不是返回解析的数据。但是我想不出正确的方法。也许你需要这样的东西：

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

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

并与模板中的

async

管道一起使用：

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

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

以及您的模板：

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

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

可能打印用户名：{{user.name}

我们在承诺中缺少返回响应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;
    });
  }
}

---

您缺少一个

返回

。它应该是

return response.json（）

另外，您正在向

用户分配承诺。你可能不想要这个，所以试试
this.userService.getUsers（）。然后（users=>this.users=users）
@Phil也许他/她想在模板中使用
async
pipe:）@TiepPhan可能是，我不喜欢Angular 2+。不确定这些天在模板中可以做什么：）您使用的是什么版本的Angular？该标记通常用于AngularJS 1.xThank you！如果我希望将数据直接发送到视图（在本例中为真），则此方法有效。我不知道我必须在视野中使用管道。但假设我想先对控制器内部的数据做些什么？