更改检测未触发

Question

我的 Angular 11 更改检测仅在我向下滚动以进行初始页面加载时触发。如果我在订阅中调试，我的 observable 会正确发出。有什么想法吗？

我的组件：

public extras$: Observable<Order[]>;
  constructor(private userService: userService) {

  }
  async ngOnInit() {
    await this.load();
  }

  private async load() {
    this.userService.user$.subscribe(async user=> {
      if (user) {
        this.extras$ = of(await this.userService.getExtras(22456));
      }
    });
  }

我的 html 组件：

<div class="u-extras">
  <div class="main-heading"><span>User Extras</span></div>
  <ng-container *ngIf="extras$ | async as extras;else loader">
    <user-extra*ngFor="let extraof extras" [extra]=extra></user-extra>
  </ng-container>
</div>

<ng-template #loader>
  <loader-dots></loader-dots>
</ng-template>

Answer 1

这不是创建和使用Observable 的正确方法。您也不需要使用async。服务中也没有ngOnInit。

我也更喜欢将Subject 声明为私有变量并公开一个公共Observable。这使我可以控制谁可以发出值。需要注意的是，我在这里使用的是BehaviorSubject，而不是普通的Subject。由于您的服务将在组件初始化之前设置，因此我们需要确保新订阅者（在本例中为您的组件）将能够获得该值。常规主题不会向新订阅者发出值，而 BehaviorSubject 会。

//User a behavior subject, which will emit values to new subscribers
private _extras = new BehaviorSubject<Order[]>([]);
private userSub: Subscription;

constructor(private userService: userService) {
    load();
}

get extras$(): Observable<Order[]>{
    return this._extras.asObservable();
}

//Services do not have ngOnInit(), but they do have ngOnDestroy
//ngOnInit(){
//    load();
//}

ngOnDestroy(){
    //be sure to clean up any subscriptions
    this.userSub.unsubscribe();
}

private load(){
    //listen for the next user to be emitted
    this.userSub = this.userService.user$.subscribe(user => {
        //when a new user is emitted, go get some extra data
        this.userService.getExtras(22456).subscribe(extras => {
            //emit the extra data
            this.extras$.next(extras);
        })
    })
}

Here is a stackblitz 演示