combine重复输入有效表单值时出现的最大错误

时间:2016-12-31 21:23:56

标签: angular angular2-forms rxjs5 typescript2.0

我有以下内容:

static phones: Map<number, {}> = new Map<number, {}>();
...

  Observable.combineLatest(
        this.form.statusChanges,
        this.form.valueChanges,
        ( status, value ) => ({ status, value }) )
              .debounceTime( 500 )
              .subscribe(
                  ( { status, value } ) => {

                        PhoneComponent.phones.set( this.rowIndex, value );
}

当表单第一次变为有效时,映射值设置没有问题。但是,如果我再次更改表单中的值,我会得到以下异常(PhoneComponent是我的自定义组件,其中使用了combineLatest)

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
error_handler.js:47 EXCEPTION: PhoneComponent_1.phones.set is not a function
ErrorHandler.handleError @ error_handler.js:47
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
error_handler.js:53 TypeError: PhoneComponent_1.phones.set is not a function
    at SafeSubscriber.__WEBPACK_IMPORTED_MODULE_2_rxjs__.Observable.combineLatest.debounceTime.subscribe [as _next] (phone.component.ts:137)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at DebounceTimeSubscriber.debouncedNext (debounceTime.js:98)
    at AsyncAction.dispatchNext (debounceTime.js:114)
    at AsyncAction._execute (AsyncAction.js:111)
    at AsyncAction.execute (AsyncAction.js:86)
    at AsyncScheduler.flush (AsyncScheduler.js:36)
ErrorHandler.handleError @ error_handler.js:53
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
phone.component.ts:137 Uncaught TypeError: PhoneComponent_1.phones.set is not a function
    at SafeSubscriber.__WEBPACK_IMPORTED_MODULE_2_rxjs__.Observable.combineLatest.debounceTime.subscribe [as _next] (phone.component.ts:137)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at DebounceTimeSubscriber.debouncedNext (debounceTime.js:98)
    at AsyncAction.dispatchNext (debounceTime.js:114)
    at AsyncAction._execute (AsyncAction.js:111)
    at AsyncAction.execute (AsyncAction.js:86)
    at AsyncScheduler.flush (AsyncScheduler.js:36)
__WEBPACK_IMPORTED_MODULE_2_rxjs__.Observable.combineLatest.debounceTime.subscribe @ phone.component.ts:137
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
DebounceTimeSubscriber.debouncedNext @ debounceTime.js:98
dispatchNext @ debounceTime.js:114
AsyncAction._execute @ AsyncAction.js:111
AsyncAction.execute @ AsyncAction.js:86
AsyncScheduler.flush @ AsyncScheduler.js:36
ZoneDelegate.invokeTask @ zone.js:265
onInvokeTask @ ng_zone.js:227
ZoneDelegate.invokeTask @ zone.js:264
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970

1 个答案:

答案 0 :(得分:1)

错误说明错了:

  

phone.component.ts:137未捕获的TypeError:PhoneComponent_1.phones.set不是函数

所以问题不在combineLatest

您的phones属性已设置(不是null),但没有set方法。 Map.set应该存在,因此看起来phones不是您认为的那样(也许您会无意中覆盖它)。

class A {
    static m: Map<number, {}> = new Map<number, {}>();
}

A.m.set(1, {'a': 123});
A.m.set(2, {'a': 321});

console.log(A.m);

上面的示例有效,但看看你调用Observable.combineLatest的地方,因为如果你看一下编译的JS,你会看到你可以在初始化静态属性之前调用Observable.combineLatest

var A = (function () {
    function A() {
    }
    return A;
}());
A.m = new Map();
A.m.set(1, { 'a': 123 });
A.m.set(2, { 'a': 321 });
console.log(A.m);