类型Observable <mydata>不能分配给MyData

Question

export class MyClass {
    data: MyData;  
    constructor(private dataService: DataService) {    
      this.data = this.dataService.getData(); // error             
    }
}


export class DataService{
    data: MyData; 
     constructor(private http: Http) { }

    getData(): Observable<MyData>{
       return Observable.from([this.fakeData()]
          .map(res=>res as MyData));
    }   

    private fakeData() : MyData {   
       ...  
    }
}

我在网上收到错误

 this.data = this.dataService.getData()

  

类型Observable不能分配给MyData

Answer 1

打字稿是对的。

在您的组件中，您说data应该是MyData对象。 然后，在您的构造函数中，您调用的服务会返回Observable MyData，并尝试将其结果分配给您的属性data。

这不是Observable的工作原理。

在这里，您有两个简单的解决方案：

订阅您的可观察

export class MyClass {
    data: MyData;  
    constructor(private dataService: DataService) {    
      this.dataService.getData().subscribe((myData) => {
        this.data = myData;
      });  
    }
}

或使用模板中的AsyncPipe

export class MyClass {
    data$: Observable<MyData>; // Change the type here.
    // The $ suffix is a convention to tell that
    // this attribute is an observable.

    constructor(private dataService: DataService) {    
      this.data$ = this.dataService.getData();  
    }
}

然后，在您的模板中，您可以将data与AsyncPipe

一起使用

<div>
    <some-component [someData]="data$ | async"></some-component>
</div>

Answer 2

试试这个，将数据声明为可观察的MyData

export class MyClass {
  data: Observable<MyData>;   
 constructor(private dataService: DataService) {    
   this.data = this.dataService.getData(); // error             
 }
}