combine重复输入有效表单值的最新错误

Question

我有以下内容：

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

Answer 1

错误说明问题所在：

phone.component.ts:137未捕获类型错误：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);