javascript 在订阅内分配的变量在订阅外为空?

7dl7o3gd  于 2023-05-12  发布在  Java
关注(0)|答案(2)|浏览(96)

在订阅内分配的变量在订阅外为空?我不知道,但是,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道,我不知道。谁来帮帮我解释一下。我试图获取订阅的值,然后在html中呈现它,但该值仅在订阅事件内部检索,而不在外部检索。我能做些什么来让它在组件的其余部分。谢谢大家。
我的服务**

import { Injectable } from '@angular/core';
import { Api } from 'src/app/services/api.service';
import { environment as env } from 'src/environments/endpoints';
import { ICode } from '../components/login/login.interfaces';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

private rol$: Subject<any>            

  constructor(
    private api: Api,
  ) {
    this.rol$ = new Subject()
  }

  async verifyCode(data: ICode) {
    const res = await this.api.post(env.auth.login, data)
      .then((res) => {
        if (!res.error) {
          this.isAuthenticated = res.isAuth 
          this.setRol(res.rolUser)           
        }
      })
      .catch((err) => {
        console.log(err)
        return false
      })

    return this.isAuthenticated
  }

  getRolUser$(): Observable<any> {
    return this.rol$.asObservable()
  }

  setRol(rolUser: any) {
    this.rol$.next(rolUser)
  }

}

}我的组件;

import { AuthService } from 'src/app/services/auth.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-panel-widgets',
  templateUrl: './panel-widgets.component.html',
  styleUrls: ['./panel-widgets.component.scss']
})
export class PanelWidgetsComponent implements OnInit {

  rolUser$: Observable<any>;

  constructor(
    private _auth : AuthService,
  ) { 
    }

  ngOnInit(){

    this._auth.getRolUser$().subscribe(e => this.rolUser$ = e)       
    
    console.log('Valor del subscribe __ ', this.rolUser$)    
 }

}

Html模板

<p class="text">
     <span><b>Usuario : </b><p style="right: 0px;">{{usuario}}</p></span>
     <span><b>Email : </b>{{email}}</span>
     <span><b>Rol : </b>{{ rolUser$ | async }}</span>
 </p>
xoefb8l8

xoefb8l81#

console.log放入订阅回调中,您会注意到它将在订阅外部的日志之后被记录。这两条路径不同步。
您可以查阅Promises和如何使用async/await以及rxjs的文档
另外,如果您想使用异步管道,则不需要在订阅本身内部设置值
在你TS做这样的事情:

public rolUser$: Observable<any> = this._auth.getRolUser$()

这样,Observable就可以进入异步管道了,就像你已经在做的那样

<span><b>Rol : </b>{{ rolUser$ | async }}</span>
fwzugrvs

fwzugrvs2#

最后,这个工作原理:

服务项目

import { BehaviorSubject, Observable } from 'rxjs';

  isAuthenticated: Boolean = false
  private rol$ = new BehaviorSubject<string>('');  

  constructor(
    private api: Api,
  ) {
  }

我用BehaviorSubject代替Subject

在我的组件中:

public rolUser$: Observable<any> | undefined;

ngOnInit() {
    this.rolUser$ = this._auth.getRolUser()
}

和模板html;

<span><b>Rol : </b>
    {{ rolUser$ | async }}
</span>

相关问题