1

我有一个服务方法，它获取虚拟数据并返回一个 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 次调用，

  1. 调用 anotherService => loadDummyData() （使用 switch map 加载数据）
  2. 调用 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>

我在这里想念什么？

4

2 回答 2

0

您没有在任何地方分配 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();
于 2019-12-04T11:54:25.907 回答
0

由于您还没有提交完整的代码，因此这里明显的问题是 dummy$ 没有在 dummyService 中分配预期值。您必须在 dummy$ 中分配值，this.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 将是未定义的，因为它的异步调用。

于 2019-12-04T11:54:44.250 回答