Angular доступ к данным вне подписки - PullRequest
Новая
       11

Angular доступ к данным вне подписки

0 голосов
/ 26 апреля 2020

Как мы можем получить доступ к данным, которые находятся за пределами подписки в angular? , Я хотел получить и использовать результат снаружи.

пользовательский компонент ts 

submit(): void {
    const request = this.UserService
      .getUser()
      .subscribe((result) => {
        this.permissions = result[0].permissions
      });

    //I need to access the data here , permissions should not be empty 
    console.log("this.permissions" , this.permissions)

  }

Сервис 

  getUser(): Observable<User[]> {
    return from(this.feathers.service('users').find<User>({ query : { identityId : 8895}}))
    .pipe(
      map((result) => result.data)
    );
  }

Ответы [ 2 ]

2 голосов
/ 26 апреля 2020

Наблюдаемое с подпиской является задачей async, в то время как console.log является синхронным. Таким образом, console.log будет запущен до завершения подписки, следовательно, вы не получите никакого значения, после чего, когда http-наблюдаемая завершится, у нас будет запущена подписка, только тогда у нас будут доступны данные о разрешениях. Измените код, как показано ниже. 

submit(): void {
    const request = this.UserService
      .getUser()
      .subscribe((result) => {
        this.permissions = result[0].permissions;
        //I need to access the data here , permissions should not be empty 
        console.log("this.permissions" , this.permissions)
      });
}

Ссылки.

  1. Event loop
0 голосов
/ 26 апреля 2020

Здесь проблема в том, что Observable не ожидает ответа от вызова службы и не выполняет оператор консоли. Поэтому значение, выводимое через оператор консоли, не является ответом, который вы ожидаете.

Для этого есть два решения:

1) Вы можете получить доступ к значению this.permissions через ваш пользовательский компонент внутри любого другого метода, если для этой переменной установлено значение. Попробуйте использовать эту переменную внутри другого метода, который вызывается после завершения этого выполнения.

2) Использование asyn c и ожидание и возврат объекта Promise вместо Observable. Тогда выполнение будет выполняться последовательно, а оператор консоли будет выполняться только после получения ответа.

пользовательский компонент ts 

async submit(): void {
    const request = await this.UserService
      .getUser()
      .then((result) => {
        this.permissions = result[0].permissions
      });

    //I need to access the data here , permissions should not be empty 
    console.log("this.permissions" , this.permissions)

  }

Служба 

return new Promise((resolve, reject) => {
      from(this.feathers.service('users').find<User>({ query : { identityId : 8895}})).subscribe(response => {
        resolve(response);
      }, reject);
    });
...