【问题标题】:Observable interval value cannot be used for arithmetic operation可观察区间值不能用于算术运算
【发布时间】:2020-01-27 19:49:41
【问题描述】:

我正在尝试将发出的值乘以 10 以使结果流为:10、20、30 ... 但是在 map 方法中我不能将它相乘,因为编译器会抛出错误。

const numbers$ = Observable.interval(1000);
numbers$.pipe(
    map((x) => 10 * x)
);

地图线错误:

The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

我还检查了 x 是“数字”的类型;

我哪里错了?

/编辑

来自 Inge Olaisen 的评论 我将代码更改为: map((x) => 10 + +x) 并且工作正常

我可以假设它是编译器错误,因为它不能将 x 识别为数字吗?

【问题讨论】:

    标签: javascript angular rxjs observable


    【解决方案1】:

    常量数$ = Observable.interval(1000); numbers$.pipe(takeUntil(this.unsubscribe)).subscribe((x) => 10 * x);

    也就是说编译器抱怨有点奇怪,但您可以尝试: const numbers$: Observable = Observable.interval(1000);

    unsubscribe 是一个在 ngOnDestroy() 方法中调用 .next() 和 .complete() 的主题。

    如果要将数据从一种类型映射到另一种类型,则使用映射。通常,如果您有数据并将其转换为另一个 observable,则该数据又会以某种形式在 html 中订阅或使用它。

    如果你只是想使用你得到的数据,那么你把它放入订阅中。

    【讨论】:

    • 嘿英格,谢谢您的回复。我尝试使用 const numbers$: Observable<number> = Observable.interval(1000); 获得相同的结果。就我而言,我想了解为什么这段代码没有按预期工作
    • 问题是编译器没有看到你在两个地方都有一个数字。如果你在 x 前面加一个 +,那么它会说什么?像这样:(x) => 10* +x
    • 好吧,这意味着您的编译器将 x 解释为字符串。我不能告诉你为什么,它应该是一个数字。
    【解决方案2】:

    来自LearnRxJs-Docs

    //emit value in sequence every 1 second
    const source = interval(1000);
    //output: 0,1,2,3,4,5....
    const subscribe = source.subscribe(val => console.log(val));
    

    连同映射当前值:

    //emit value in sequence every 1 second
    const source = interval(1000);
    //output: 0,1,2,3,4,5....
    const subscribe = source
      .pipe(map(n => 10 * n))
      .subscribe(val => console.log(val));
    

    我想补充一点,您应该管理您的 observables 的处置,这里有一个 good article 用于处置/取消订阅 observables。

    【讨论】:

    • 如果您只对在变量中使用结果感兴趣,为什么要使用 .pipe(map?
    • @IngeOlaisen,在 OP 问题帖子中,他正在使用地图。此外,根据使用情况,您可能希望在到达子节点之前进行所有预处理。
    • 确实如此,但是当只是将其发送到控制台日志或局部变量时,我看不到使用地图的意义。
    • @IngeOlaisen 您假设 OP 只是在做一些微不足道的事情,比如登录到控制台。也许他抽象出间隔的最终意图是为了保持问题简洁。
    • 没错,我做了一个假设。重点只是为了解释清楚,这就是为什么我问你为什么这样做。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-10-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-20
    • 2016-05-21
    • 1970-01-01
    相关资源
    最近更新 更多