Question

在我的角度应用程序中，我在使用rxjs创建可观察数组时遇到了麻烦。

来源：

import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";
import { User } from "../model/user";


@Injectable()
export class UserService {

    public GetList(): Observable<User[]> {
        return Observable.of(this.GetDummyData());

    }

    private GetDummyData(): Array<User> {
        var users: Array<User> = new Array<User>();
        users.push(new User(1, "user one", 1, 1000001, true));
        users.push(new User(2, "user two", 2, 1000002, false));
        users.push(new User(3, "user three", 3, 1000003, true));
        return users;
    }
}

这会产生以下错误：

错误错误：未捕获（在承诺中）：TypeError：无法读取属性＆＃39;的＆＃39;未定义的

显然，静态方法不可用。我从这里尝试了两件事：

使用构造函数并创建一个observable实例（Not working，error Uncaught (in promise): TypeError: Rx_1.Observable is not a constructor）
更改import语句以匹配以下内容（不起作用，错误保持不变）

 import { Observable } from "rxjs/Observable";
 import "rxjs/Observable/of";

我可以做些什么来摆脱这个错误？

使用过的lib版本：

  "@angular/common": "4.0.1",
  "@angular/compiler": "4.0.1",
  "@angular/core": "4.0.1",
  "@angular/forms": "4.0.1",
  "@angular/http": "4.0.1",
  "@angular/platform-browser": "4.0.1",
  "@angular/platform-browser-dynamic": "4.0.1",
  "@angular/animations": "4.0.1",
  "@angular/router": "4.0.1",
  "core-js": "2.4.1",
  "reflect-metadata": "0.1.10",
  "rxjs": "5.4.1",
  "systemjs": "0.20.11",
  "zone.js": "0.8.5",

修改也许在这里遇到一些优势问题。我检查了文档（Pankaj Pankar在这里的评论中慷慨提供的链接）并没有明确提到ES5，这是我的编译目标。所以，请确保这不是问题，这里有一些我的设置：

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "lib": ["es5", "es2015", "dom" ]
    }
}

下面提到的任何版本（或文档中都没有）对我有用，所以我认为我的模块中必定存在不兼容性。

尽管如此，这是我发现工作的唯一方式 - 但不满意（负载很大）

import { Observable } from "rxjs/Rx";
import Rx from 'rxjs/Rx';
import 'rxjs/add/observable/of';

public GetList(): Observable<User[]> {
            return Rx.Observable.of(this.GetDummyData());

        }

根据我的理解，这意味着定义了Rx.Observable，但Observable（之前使用过的）不是。

Answer 1

尽量避免导入rxjs/Rx，这将加载完整的库（大小问题）。

通常这是我推荐的方法：

import { Observable } from 'rxjs/Observable';// Import only the basics
import { of } from 'rxjs/observable/of'; // for static methods
import 'rxjs/add/operator/catch'; // for operators
import 'rxjs/add/operator/map';

这样您可以通过以下方式使用of：

return of(1,2,3);

如果您使用rxjs/add/observable/of，您基本上会将使用上一种方法导入的静态方法添加到Observable类中。

更新：考虑到这在我的本地机器上有效，它很可能与成绩单或构建过程有关。这是我的ts.config.json（由角色cli生成）：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

Answer 2

尝试在下面导入：

import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/of';

Answer 3

您需要从'rxjs/add/observable/of'。

导入它

如果只从'rxjs/observable/of'导入，则不会将运算符添加到Observable类中。对于运营商也是如此。

这可以在消息来源中看到： https://github.com/ReactiveX/rxjs/blob/master/src/add/observable/of.ts#L4

Observable和静态方法（of，from，...）的构造函数不可用

3 个答案: