Question

我从http获取数据，将其存储在数组中的同一服务中。

export class UserService {
    myusers: User[];
    constructor(private http: HttpClient) {}
    getUsers () {
     return this.http.get<User[]>('https://randomuser.me/api/results=5')
    .subscribe( data => { this.myusers = data['results']}); }
}

当我在component.ts中控制myusers时，它会打印＆＃39; Undefined＆＃39;。

export class UserComponent implements OnInit {
  constructor(private service: UserService) { }
  ngOnInit() {
    this.service.getUsers();
    console.log(this.service.myusers); //undefined
  }
}

那我怎样才能访问this.service.myusers？不建议将数据存储在组件数组中的解决方案不在服务myusers数组中。

Answer 1

你总是可以使用Observable.of

从数组中返回一个Observable

valores=[{id:1,nombre:"uno"},{id:2,nombre:"dos"},{id:3,nombre:"tres"}];

getUsers()
{ 
    if (this.valores)
       return Observable.of(this.valores);
    else 
        return this.http.get(url).map((response)=>
        this.valores=...
        ...);
}

Answer 2

由于从API返回数据需要一些时间，因此您需要从服务中回复完成作业。

export class UserService {
    myusers: User[];
    constructor(private http: HttpClient) {}
    getUsers () {
        return this.http.get<User[]>('https://randomuser.me/api/results=5');
    }
    setUsers (users: User[]) {
        this.myusers = users;
    }
}

调用如下函数：

export class UserComponent implements OnInit {
  constructor(private service: UserService) { }
  ngOnInit() {
    this.service.getUsers()
    .subscribe( data => { this.service.setUsers(data); console.log(data); });
  }
}

如果这不符合您的目的，请告诉我

Answer 3

您的服务应该是。

    import {Injectable} from '@angular/core';
    import {Http, Response} from '@angular/http';
    import {Observable} from 'rxjs/Observable';

    @Injectable()

    export class UserService {
        constructor(private http: Http) {}

        getUsers (): Observable<void> {
            const url = 'https://randomuser.me/api/results=5';
            return this.http.get(url).map(
                (res: Response) => {
                  return res.json() as = User[];
                }).catch(
                (error: Response) => {
                    return Observable.throw(error.json());
                });
        }
    }

组件应该像

export class UserComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.getUsers();
  }

  private getUsers(): void {
       this.userService.getUsers().subscribe(
         (response: User[]) => {
           this.users = response;
           console.log(response); 
        );
    }       
}

注意：angular4基于类型脚本。因此，根据最佳实践，您需要将类型分配给方法和变量。

如何获取存储在服务中的异步数据？

3 个答案: