代码之家 › 专栏 › 技术社区 › inorganik

switchMap然后合并不起作用

rxjs angular

inorganik · 技术社区 · 8 年前

在我的Angular应用程序中,我路由到一个组件。在这个组件中,我想显示一个 item$ 可观察的。

现在,如果我的服务有一个缓存项,使用它,不管怎样,从后端请求一个项。因此,体验可能是显示缓存项一段时间,然后后端项在加载后替换它。如果该项在后端不存在,则缓存的项将是唯一发出的值。如果不是,我们会显示一个“未找到”。

以下是我如何执行的:

  ngOnInit() {
    this.item$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.id = params.get('id'); // get the id
        if (this.service.item && this.id === this.service.item.id) {
          return of(this.service.item); // cached item
        }
        return of(null); // nothing cached
      }),
      merge(this.backend.getItem(this.id)) // get backend item
    );
  }

我的模板代码

<div *ngIf="item$ | async as item; else showNotFound">
  <p>{{ item.name }}</p>
  <!-- other props omitted -->
</div>
<ng-template #showNotFound>
  <p>Not found</p>
</ng-template>

但是,merge在switchMap之前激发,无法获取该项,因为 this.id 尚未设置。如果我将合并移到switchMap前面,switchMap将无法获取参数。如何做到这一点?

2 回复 | 直到 8 年前

Eliseo 8 年前

我知道你想写信

ngOnInit() {
    this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.id = params.get('id'); // get the id
        if (this.service.item && this.id === this.service.item.id) {
          return of(this.service.item); // cached item
        }  
        //If not is cached
        return this.backend.getItem(this.id)
          //You can "cached" the value, here
          .pipe(tap((item)=>{this.service.item=item}
          ));
      })).subscribe((item)=>{this.item=item}); //DON'T forget subscribe
  }

inorganik 8 年前

我可以这样做:

  ngOnInit() {
    this.item$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.id = params.get('id'); // get the id
        return this.backend.getItem(this.id).pipe(
          map(backendResult => {
            if (backendResult === undefined) {
              if (this.service.item && this.id === this.service.item.id) {
                return this.service.item; // cached item
              }
              return null; // nothing cached
            } else {
              return backendResult;
            }
          })
        );
      }),
    );
  }

推荐文章

Ole · 在使用新的Angular Resource API时取消搜索术语?

1 年前

koque · 为什么我的RxJs主题没有按预期工作?

1 年前

Raphaël VO · 不使用Observable的初始值

1 年前

xarielah · 从app.config.ts调用时,BehaviorSubject不会更新

1 年前

Lenni · 返回信号并在Angular中订阅它

1 年前

dman · 在Angular单元测试中似乎无法模拟行为主体

1 年前

Nevyan Dimitrov Neykov · 效果内部的角度信号()

1 年前

Ð¤ÐµÐ´Ñ Ð Ð°Ð²ÑÐµÐµÐ² · 如何在react-js中使用Date()在后台增加变量?

1 年前

Ryley38 · 如何跳过流的第一个值,除非它是RxJS的复制粘贴?

1 年前

techwestcoastsfosea · Angular 18-RxJS:Subscribe已弃用[重复]

1 年前