Question

我正在尝试从Auth0获取用户个人资料信息。它通过管道Async

在前端工作

<pre *ngIf="auth.userProfile$ | async as profile">
<code>{{ profile | json }}</code>
</pre>

但是在后端，如果我想读取昵称并对其进行处理。我迷路了。

constructor(public auth: AuthService)
ngOnInit() {
   if (this.auth.isAuthenticated$) {
    const result = this.auth.userProfile$;
   }
}

我知道我的变量“结果”是可观察的。但是我对这种可观察的东西并不陌生。而我试图获得价值。如果使用调试控制台，则可以在此行看到值：

this.auth.userProfile$.source.value.nickname

但是，如果我在代码中编写了此错误，则会出现此错误：打字稿错误：类型“可观察”的属性“值”不存在

ngOnInit() {
   if (this.auth.isAuthenticated$) {
    const result = this.auth.userProfile$;
    console.log(this.auth.userProfile$.source.value.nickname); // error here

   }
}

那么有人可以帮助我吗？谢谢

Answer 1

您可以通过订阅observable中的数据来访问数据（这是async管道在内部的作用）。

以下是如何订阅可观察对象的示例：

// import { tap } from 'rxjs/operators';
// tap is one of many rxjs operators
// operators allow you to perform operations on data within observables

this.auth.userProfile$.pipe(
  tap(profile => {
    console.log(profile);
  })
)
.subscribe(); // this is what allows you access the data within the observable

可观察到的：https://angular.io/guide/observables

RXJS运算符：https://rxjs-dev.firebaseapp.com/guide/operators

Answer 2

我终于找到了解决方法：

在课堂上，我输入以下代码：

export class getInfo implements OnInit {
   private login_info: any;

   ngOnInit() {
      this.auth.getUser$().subscribe(val => {
        this.login_info = val;
        console.log('print info', val.nickname);
     });
  }
}

public useInfo(status: string) {
  console.log('print info', this.login_info.nickname);
}

因此，在useInfo方法中，我可以使用从用户个人资料中获取的信息。

auth0获取个人资料信息的背面

2 个答案: