先给出代码示例,然后说明原因和解决方法。
代码示例:
import { Component } from '@angular/core';
import { interval, Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: `
Number: {{ number }}
`,
})
export class AppComponent {
number: Observable;
constructor() {
this.number = interval(1000);
}
ngOnInit() {
this.number.subscribe(val => {
console.log(val);
});
}
}
以上代码中,变量number
类型被声明为一个Observable
,但是在构造函数中,使用的是interval(1000)
创建了一个Observable
,并将其赋值给了number
变量。在ngOnInit()
中,我们使用了number.subscribe()
订阅了这个可观察对象。
但是,当我们尝试编译这个组件时,会收到以下错误消息:
Type 'Subscription' is not assignable to type 'Observable'.
Property '_isScalar' is missing in type 'Subscription'.
这是因为this.number
被赋值为了一个订阅对象,而不是一个可观察对象。订阅对象是Observable.subscribe()
方法的返回值,它表示已经订阅该可观察对象的订阅者。
因此,我们应该将interval(1000)
的返回值直接声明为number
变量的类型,从而避免使用订阅对象而导致的类型不匹配错误:
import { Component } from '@angular/core';
import { interval, Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: `
Number: {{ number }}
`,
})
export class AppComponent {
number: number;
constructor() {
this.number = interval(1000);
}
ngOnInit() {
interval(