Question

我已经创建了一个从服务器获取数据的服务，但我无法弄清楚如何在我的控制器中检索已解析的数据。

这是服务：

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

我想这个问题与我返回功能＆＃34; fetch＆＃34;本身而不是已解决的数据。但我无法弄清楚正确的方法。

Answer 1

也许你需要这样的东西：

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>

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调用，因此将结果放在其中。

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

  constructor(private userService: UserService) {}

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

角度服务承诺

2 个答案: