如何正确使用异步管道更新 Angular 7 中的模板答案

【问题标题】：How can I use async pipe correctly to update template in angular 7如何正确使用异步管道更新 Angular 7 中的模板
【发布时间】：2019-12-04 11:17:14
【问题描述】：

我有一个服务方法，它获取虚拟数据并返回一个 observable。

private dummySubject = new BehaviorSubject<Dummy>(null);
dummy$ = this.dummySubject.asObservable();

loadDummyData(id: string): Observable<Dummy> {
  const BASE_URL = 'someurl/' + id; 
  return this.http.get<Dummy>(BASE_URL).pipe( 
    tap((dummyData: Dummy ) => {
      console.log('In Service ', dummyData); //LOGS DATA HERE
      this.dummySubject.next(dummyData);
    })
  );
}

在另一个服务中，我使用 switchMap 运算符将用户 ID 映射到我的 loadDummyData 方法中。

另一个服务

loadDummyData(){
  this.dummyService.user$.pipe(
    switchMap((user: User) => {
      return this.dummyService.loadDummyData(user.id);
    })
  ).subscribe();
}

然后在我的getData component

localData: Dummy;
dummy$: Observable<Dummy> = this.dummyService.dummy$;

ngOnInit() {
  1) this.anotherService.loadDummyData(); //Causes data to be loogged in service
  2) this.dummyService.loadDummyData('12345').subscribe( //causes data logged in service
    (dummy: Dummy) => {
      this.localProfile = dummy;
      console.log(this.localProfile, 'data in component'); //local data log
    }, 
    err => {
      console.error(err);
    }
  );
  console.log(this.localProfile, 'In ngOnint'); //undfiened 
}

在getData component 中，我对 dummyService 方法进行了 2 次调用，

调用 anotherService => loadDummyData()（使用 switch map 加载数据）
调用 dummyService => loadDummyData() 直接传递 Id 并订阅。

这两次数据都记录在控制台中并且似乎又回来了。但是，在我的模板中，async | 没有显示数据。 loadProfile 变量在第二次调用中也未定义以获取数据。

模板

<div *ngIf="dummy$ | async as dummyData">
  <span class="pull-right" *ngIf="dummyData.canViewAdmin">
    <a (click)="openChangeUserModal()">Change user</a>
  </span>
  <p>{{dummyData.name}}</p>
</div>

我在这里错过了什么？

【问题讨论】：

标签： angular rxjs observable behaviorsubject subject-observer

【解决方案1】：

您没有在任何地方分配 dummyData！

改成这样：

loadDummyData(): Observable<Dummy> {
  return this.dummyService.user$.pipe(
    switchMap((user: User) => this.dummyService.loadDummyData(user.id)),
  );
}

和

dummy$: Observable<Dummy> = this.dummyService.dummy$;

ngOnInit() {
  this.dummy$ = this.anotherService.loadDummyData();

【讨论】：

【解决方案2】：

由于您还没有提交完整的代码，因此这里明显的问题是 dummy$ 未在 dummyService 中分配预期值。您必须在 dummy$ likethis.dummy$ = this.dummySubject.asObservable(); 中分配值，然后才能在组件中使用它的值。

加载loadUserProfile方法在哪里。

在您的情况下，如果您删除异步管道并将您的 html 与 localProfile 绑定，那么它也可以工作。

改变你的html

 <div *ngIf="localProfile">
  <span class="pull-right" *ngIf="localProfile.canViewAdmin">
    <a (click)="openChangeUserModal()">Change user</a>
  </span>
  <p>{{localProfile.name}}</p>
</div>

在订阅回调之外，localProfile 将是未定义的，因为它的异步调用。

【讨论】：

我已经更新了问题，当我们尝试在订阅正文之外调用 localProfile var 时，它返回 undefined。如果添加到模板中，则会导致模板错误。
我做了与上面完全相同的 localProfile 导致模板问题，看起来 localProfile var 没有在订阅正文之外填充。
你的console.log怎么会在订阅中运行呢？
这是个好问题。我将它记录在订阅主体之外并且它是未定义的，我认为这与对服务的调用是异步调用和控制台是同步的。