【问题标题】:rxjs flatmap missingrxjs 平面图丢失
【发布时间】:2016-11-23 17:16:44
【问题描述】:

我尝试链接多个 rx.js 可观察对象并传递数据。 Flatmap 应该是合适的运算符,但要导入

import { Observable } from 'rxjs/Observable';

没有找到:

Error TS2339: Property 'flatmap' does not exist on type 'Observable<Coordinates>'

使用了 rx.js 的 5.0.0-beta.6 版本。

public getCurrentLocationAddress():Observable<String> {
    return Observable.fromPromise(Geolocation.getCurrentPosition())
      .map(location => location.coords)
      .flatmap(coordinates => {
        console.log(coordinates);
        return this.http.request(this.geoCodingServer + "/json?latlng=" + coordinates.latitude + "," + coordinates.longitude)
          .map((res: Response) => {
                       let data = res.json();
                       return data.results[0].formatted_address;
              });
      });
  }

【问题讨论】:

  • 注意:是flatMap,不是flatmap

标签: rxjs observable reactive-extensions-js


【解决方案1】:

原来答案很简单:

在这个版本的 rxjs 中操作符被称为mergeMap

编辑:

此外,您可能必须使用import 'rxjs/add/operator/mergeMap'

【讨论】:

  • 而flatMap是它的别名,不过是大写的M
  • 请更新您的答案以包括import 'rxjs/add/operator/mergeMap';,因为那是最后的魔法!谢谢@Chris Peacock
【解决方案2】:

在我的情况下,我需要为 mergeMap 导入扩充:

import 'rxjs/add/operator/mergeMap';

由于flatMap是mergeMap的别名,导入上面的模块就可以使用flatMap了。

【讨论】:

    【解决方案3】:

    在 RxJS 5.5+ 中,flatMap 运算符已重命名为 mergeMap。相反,您现在应该将mergeMap 运算符与pipe 结合使用。

    您仍然可以使用别名 FlatMap 来使用 flatMap。

    RxJS v5.5.2 是 Angular 5 的默认依赖版本。

    对于您导入的每个 RxJS 运算符,包括 mergeMap,您现在应该从“rxjs/operators”导入并使用管道运算符。

    在 Http 请求 Observable 上使用 mergeMap 的示例

    import { Observable } from 'rxjs/Observable';
    import { catchError } from 'rxjs/operators';
    ...
    
    export class ExampleClass {
      constructor(private http: HttpClient) {
        this.http.get('/api/words').pipe(
          mergeMap(word => Observable.of(word.join(' '))
        );
      }
      ...
    }
    

    请注意,flatMap 已替换为 mergeMappipe 运算符用于以与您习惯使用点链类似的方式组合运算符。


    有关更多信息,请参阅关于 lettable 运算符的 rxjs 文档 https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

    【讨论】:

      【解决方案4】:

      正确的导入应该如下所示:

      import { Observable } from 'rxjs/Observable';
      import 'rxjs/add/operator/mergeMap';
      

      导入模块mergeMap 将使您能够在代码中使用flatMap

      当您将在代码中导入 import { Observable } from 'rxjs/Rx'; 时,不需要额外的 mergeMap 导入,但您可能会在 AoT 编译期间出现错误。

      ERROR in ./node_modules/rxjs/_esm5/observable/BoundCallbackObservable.js
      Module build failed: TypeError: Cannot read property 'type' of undefined
      

      【讨论】:

        【解决方案5】:

        快速更新 - 2019 年 5 月

        使用 rxjs v6.5.1

        导入为mergeMap 运算符,例如/

        import { Observable, from, of } from "rxjs";
        import { map, filter, mergeMap } from "rxjs/operators";
        

        然后与新的pipe 功能结合使用,例如/

        var requestStream = of("https://api.github.com/users");
        var responseStream = requestStream.pipe(
          mergeMap(requestUrl => {
            console.log(requestUrl);
            ... // other logic
            return rp(options);  // returns promise
          })
        );
        

        【讨论】:

        • 我认为这是 Angular / typescript 的最佳答案你们怎么看?
        【解决方案6】:

        它对我有用!

        import { Observable } from 'rxjs/Rx';
        

        【讨论】:

        • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。请阅读此how-to-answer 以提供高质量的答案。
        • 这就是你如何包含不必要的代码并使你的包比它需要的大。在大多数情况下,至少是这样。
        猜你喜欢
        • 2018-08-03
        • 1970-01-01
        • 2020-10-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-01-20
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多