时间戳

首页 > 解决方案 > 不能使用异步管道 RXJS - ANGULAR

javascript - 不能使用异步管道 RXJS - ANGULAR

问题描述

当我想使用异步管道时，我无法直接显示我的 observables。我可以不用管道异步，它可以工作。我的评论代码运行良好，但我真的很想单独使用 Angular 的异步管道并取消订阅。

用户服务

  public newsfeed: BehaviorSubject<MessageUser> = new BehaviorSubject(null);

reloadNewsFeed(): Observable<MessageUser> {
      return this.http.get<MessageUser>('api/user/newsfeed').pipe(
        tap((x: MessageUser)=>{
        this.newsfeed.next(x)
      }), switchMap(()=>{
        return this.newsfeed
      }))
  };

新闻提要.component.ts

//public lesMessage2; 
public lesMessages:Observable<MessageUser>

  constructor(
    private userService: UserService,
  ) { }

 ngOnInit() {

  // It does not work
    this.lesMessages = this.userService.reloadNewsFeed()

  // OK that works
  //   this.subMessage = this.userService.reloadNewsFeed().subscribe((user: MessageUser)=>{
  //   console.log(user);
  //   this.lesMessage2 = user;
  // }, (err)=>{
  //   console.log(err);
  // })
  }

newsfeed.component.html

<span *ngIf="lesMessage | async; let user">
<p>Iterer sur mon Subjects : <strong> {{ user.message }} </strong> </p>
</span>

标签： javascriptrxjs

解决方案

问题是在 TS 文件中，您的属性名为，this.lesMessages但在模板中，您尝试订阅“lesMessage”（应该是 lesMessages）。尝试更改您当前的字符串：

... *ngIf="lesMessages | async" ...

推荐阅读