繁体   English   中英

Angular 6-一些组件使用仅调用一次的相同随机数据-如何避免“未定义”

Angular 6 - a few components using the same randomised data that's called only once - how to avoid 'undefined'

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试在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 个回复

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

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一些东西

3 Angular - 从 api 获取数据,问题第一次数组未定义

我从 API 获取数据时遇到问题,我在提交表单时从 API 获取数据。 问题是当我控制台记录数组以查看我收到的元素时,我的数组未定义,并且只有当我第二次单击(提交表单)数组包含数据时。 我尝试在组件电影中的 submitForm function 中控制数组,您可以在代码中看到。 显示问题的控制台屏 ...

4 我从随机数组中多次未定义

我在Javascript中做一个随机生成器。 什么不起作用? 我经常得到undefined值(大约80%的时间)作为此脚本中的第一个值。 如果我将数组放大,则错误发生的次数会减少。 什么时候会起作用? 如果我使两个数组具有相同数量的条目,我不会得到错误。 如果我在 ...

7 ApolloClient useLazyQuery 第一次调用返回 undefined

我在从 useLayzyQuery 获取请求时遇到问题。 我有登录屏幕,当用户填写表单时,它在 MyContext.Provider 中调用 LogIn function: 当我单击按钮时,它应该控制台记录我返回 useLazyQuery 的数据。 但是当我单击时,它返回未定义并且它在第二次单击时 ...

9 未定义一些lodash函数

lodash函数中的某些给出“没有函数错误”。 例如: _.minBy . _.maxBy , _.cloneDeep . _.minBy , _.maxBy . _.cloneDeep等。 _.map , _.clone . _.clone等其他功能也可以正常工作。 我尝试了loda ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM