我正在尝试在ngOnInit的多个组件中使用相同的数据,问题是,每次我订阅时,数据都是随机的。 在整个应用运行过程中,我只能订阅一次。 这意味着,如果我订阅两次,它将没有任何用处,因为每个组件都会有其他东西。

我想在服务中订阅一次并创建一个全局变量。 但是,当您尝试在所有组件(在ngOnInit )中使用该全局变量时,该变量始终是未定义的。

如何使组件等待只能在应用程序中调用一次的相同事件?

export class UsersService {

  public allUsers: Array<Object> = []
  public allUsersUrl: string = 'https://glacial-escarpment-40412.herokuapp.com/users/'

  constructor(private http: HttpClient) { 
    this.getAllUsers().subscribe(data => {
        this.allUsers = data;
        console.log(this.allUsers)
    })
  }

    getAllUsers(): Observable<any> {
        return this.http.get<any>(this.allUsersUrl);
    }

    getUser(id: number): Observable<any> {
        return this.http.get<any>(this.allUsersUrl + id);
    }
}

我的组件:

export class FirstComponent {

  constructor(private usersService: UsersService){}

    ngOnInit() {
        console.log(this.usersService.allUsers) //undefined
    }

export class SecondComponent {

  constructor(private usersService: UsersService){}

    ngOnInit() {
        console.log(this.usersService.allUsers) //undefined
    }

请帮我 :)

#1楼 票数:0

您有一个同步问题。 这是你的情况

1-创建first component 1.1-注入UsersService 1.2-针对ASYNC数据的UsersService请求(继续执行)2- FirstComponent获取并打印this.usersService.allUsers (由于异步请求而未填充)3- this.usersService.allUsers仍未定义

您需要这样的主题

UsersService

export class UsersService {

  private _allUsersSource = new Subject<Array<Object>>();
  private _allUsers$ = this._allUsersSource.asObservable();

  public allUsersUrl: string = 'https://glacial-escarpment-40412.herokuapp.com/users/'

  constructor(private http: HttpClient) { 
    this.getAllUsers();
  }

    getAllUsers(): Observable<any> {
        return this.http.get<any>(this.allUsersUrl).subscribe(
              data => this._allUsersSource.next(data)
              );
    }

    get allUsers$(): Observable<Array<Object>> {
        return this._allUsers$;
    }

    // OTHERS
}

FirstComponent

export class FirstComponent {

  subscription: Subscription;
  allUsers: Array<Object>;

  constructor(private usersService: UsersService){}

    ngOnInit() {
        this.subscription = this.usersService.allUsers$.subscribe(users => {
                                  this.allUsers = users;
                                  console.log(this.allUsers);
                            });


    }

SecondComponent一些东西

  ask by Itay translate from so

未解决问题?本站智能推荐:

1回复

为什么在每个路线更改时实例化单例服务,而在Angular6中不仅实例化一次?

我有这样定义的服务: 据我了解,此服务应在应用程序的整个运行过程中处于单一状态。 现在,页面刷新时,它会正确记录“ Called DataService构造函数 ”。 不幸的是,当我导航到另一个页面(带有延迟加载模块的新路由)时,构造函数再次运行,并且每次路由更改时都会记录“ Cal
4回复

无法将服务数据传递到组件

我正在尝试将服务中存在的Array传递给Component,现在我在控制台中得到结果“ undefined” 。 当我向组件注入服务并将数据传递给变量,然后传递console.log()变量时 Service.ts文件 import { Injectable } from '@angula
2回复

在不同的浏览器上对相同的api调用获得不同的响应

我正在使用Angular6进行项目。 在一个奇怪的问题上,我已经挠了三天。 问题是,对于通过适当参数传递的相同api调用,我在两种浏览器(chrome和Internet Explorer 11)上得到了不同的响应。 镀铬响应非常好并且已更新。 算法:我有两种方法 populate
2回复

使用服务的可重用组件之间的通信

我创建了两个generic components称为1)list和2)details,以便我可以重用它们: 组件看起来像这样: 现在,我在称为SCHOOL和COLLEGE的另一个组件中重新使用这些组件,它们将显示如下: 现在 如果我从SCHOOL组件中存在的list组件
2回复

将服务数据放入组件时面临的问题

我正在一个项目中-> ** 1。 **我创建了一个服务文件news.service.ts,(下面的代码)** 2。 **在服务中,我创建了函数throwData(),该函数返回服务的数据 ** 3。 **我创建了一个组件文件,该文件将通过以下代码尝试从
1回复

没有从服务中获取更新的数据到组件2中的组件1onclick事件的角度

我正在使用 angular 9 来制作新闻应用程序。我正在使用 Times of India RSS Feed API https://timesofindia.indiatimes.com 这是我的 stackblitz 链接https://stackblitz.com/github/mehulk
1回复

Angular6无法编译且出现服务错误

我是Angular 6的新用户,但使用得越多,它的意义就越大。 我的服务无法连接到数据库 这是我尝试ng serve时在Angular CLI中收到的错误消息 src / app / services / site.service.ts(29,5)中的错误:错误TS2322:无法将
3回复

执行POST操作后刷新组件

我有一个名为“ customers-list组件,该组件在其中显示来自API的所有客户: 客户-list.html 客户-list.ts 我还有另一个名为add-customer组件,我将在其中添加新客户,如下所示: 现在, POST操作可以正常进行,但是不刷新页面就不会更新cu