0

我正在从 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 中控制台我的用户时，它会打印“未定义”。

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

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

4

3 回答 3

2

你总是可以使用 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=...
        ...);
}
于 2017-10-03T09:09:39.537 回答
1

由于从 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); });
  }
}

让我知道这是否不符合您的目的

于 2017-10-03T04:09:39.750 回答
0

你的服务应该是这样的。

    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 基于类型脚本。因此，根据最佳实践，您需要将类型分配给方法和变量。

于 2017-10-03T04:30:20.337 回答