Type Observable is not assignable to 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 {   
       ...  
    }
}

I'm getting error on line

 this.data = this.dataService.getData()

Type Observable is not assignable to MyData

But you return Observable. What are you expecting? `this.dataService.getData().subscribe(data=> this.data = data })` — yurzui, Nov 14 '17 at 18:31
Possible duplicate of [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Igor, Nov 14 '17 at 18:49

Noémi Salaün · Accepted Answer · 2017-11-14T18:46:49.163

1

Typescript is right.

In your component, you said that data is supposed to be a MyData object. Then, in your constructor you call your service that returns an Observable of MyData and you try to assign its result to your attribute data.

That's not how Observable works.

Here, you have two simple solutions :

Subscribing to your observable

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

Or using the `AsyncPipe` in your template

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();  
    }
}

And then, in your template you can use data with the AsyncPipe

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

edited Nov 14 '17 at 18:46

answered Nov 14 '17 at 18:38

Noémi Salaün

4,866
2
33
37

I didn't vote down but using first approach I'm getting Type 'Subscription' is not assignable to type MyData – user1765862 Nov 14 '17 at 18:45
Ah right, I didn't remove the assignation, sorry. I forget to add a $ also. Updated ! – Noémi Salaün Nov 14 '17 at 18:46
How can I apply async pipe on ? – user1765862 Nov 14 '17 at 19:10
You can't directly. But you can split the binding from the change event. ``. The "banana in a box" syntax `[(ngModel)]` is just a shortcut. – Noémi Salaün Nov 14 '17 at 19:19

score 0 · Answer 2 · answered Nov 14 '17 at 18:36

0

try this, declare data as observable of MyData

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

answered Nov 14 '17 at 18:36

Fateh Mohamed

20,445
5
43
52

Type Observable is not assignable to MyData

2 Answers2

Subscribing to your observable

Or using the AsyncPipe in your template

Or using the `AsyncPipe` in your template