从可观察流中获取结果值

Question

我正在使用 angular 12 项目。

我有一个可观察的：

     export class RegisterUserShellComponent implements OnInit {

       constructor(private store: Store<State>) { }

       user$: Observable<User>;
       isNull$: Observable<Boolean>; 

       ngOnInit(): void {
            this.user$ = this.store.select(getSelectedUser);
       }
      
     }

这是用户 class 的定义：

    export interface User {
        id: string | null;
        name: String;
        socialMedia: SocialMedia;
        companyName: string;
    }

我需要从 user$ 获取值，检查它是否为 null 并将其分配给 isNull$。

我的问题是如何从值 user$ 流中读取属性来处理该值（检查它是否为 null）并将结果分配给 isNull$？

Answer 1

假设 this.store.select(getSelectedUser) returns 是一个 observable，然后您可以订阅它，检查是否返回了一个值，然后使用 [=13= 将 isNull$ 设置为一个 observable ] 与该检查的布尔值。

    export class RegisterUserShellComponent implements OnInit {
    
       constructor(private store: Store<State>) { }
    
       user$: Observable<User>;
       isNull$: Observable<Boolean>; 
    
       ngOnInit(): void {
            this.user$ = this.store.select(getSelectedUser);
            this.user$.subscribe(user => this.isNull$ = of(!!user))
       }
    }

Answer 2

只需 subscribe 即可从组件内的可观察对象中获取结果。如果要为其分配一个布尔值，我不确定为什么将 isNull 声明为 observable，所以我假设这是一个错误。

export class RegisterUserShellComponent implements OnInit {

    constructor(private store: Store<State>) { }

    user$: Observable<User>;
    isNull: boolean; 

    ngOnInit(): void {
         this.user$ = this.store.select(getSelectedUser);
         this.user$.subscribe((user) => (this.isNull = !!user));
    }
      
}

如果我误解了你的问题，请告诉我。

Answer 3

使用rxjs，无需手动订阅。此解决方案还将 isNull$ 保持为可观察值。

this.user$ = this.store.select(getSelectedUser);
this.isNull$ = this.user$.pipe(map(user => user === null));

然后（如果相关）对模板中的每个可观察对象使用async管道。

从可观察流中获取结果值

Get the result value from an observable stream

rxjs

ngrx

redux-observable

angular