Cannot assign Object[] to Observable<Object[]>

Question

I'm currently bumbling my way through an Angular 4 project. I've manageed to overcome most errors myself, so far, however I cannot figure out this one.

I am trying to use *ngFor (async) to display a list of Observable objects. However, I get the error "Cannot assign Course[] to Observable< Course[] >", however I feel like my service is returning an Observable< Course[] >.

course-list.component.ts:

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { CourseCardComponent } from '../course-card/course-card.component';
import { CourseCardService } from '../course-card/course-card.service';
import { CourseCard } from '../course-card/course-card.model';
import { Observable }     from 'rxjs/Observable';

@Component({
  selector: 'app-course-list',
  templateUrl: './course-list.component.html',
  styleUrls: ['./course-list.component.css']
})
export class CourseListComponent implements OnInit {
  courseCards : Observable<CourseCard[]>;
  loaded = false;

  constructor(private http:Http, private coursecardService:CourseCardService) { }

  ngOnInit() {
    this.coursecardService.getCourses()
    .subscribe(
      courses => {
        this.courseCards = courses;
        console.log(this.courseCards);
        this.loaded = true;
      },
      err => {
        console.log("Error", err);
      }
    )
  }
}

course-card.service.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { CourseCard } from './course-card.model';

@Injectable()
export class CourseCardService {
    // Returns this JSON data:
    // [{"firstName":"Jane"},{"firstName":"John"}]
    private URL = '/api/getcourses';

    constructor (private http: Http) {}

    getCourses(): Observable<CourseCard[]> {
        return this.http.get(this.URL)
            .map((response) => {
            let data = response.text() ? response.json():[{}];
                if(data) {
                    return data;
                }
            }
        )
        .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
    }
}

And the HTML for the course-list component Courses

<ul>
  <li *ngFor="let course of courses|async">
    <app-course-card [name]='course.name' [wordcount]=0></app-course-card>
  </li>
</ul>

Nicholas Tower · Accepted Answer · 2017-10-25 03:07:20Z

5

This part does return an Observable<CourseCard[]>:

this.coursecardService.getCourses()

But then you are manually subscribing to it, and inside of the subscribe, courses is of type CourseCard[]. So when you try to assign this.courseCards = courses;, that's when you're getting the type mismatch.

The async pipe will do the subscription for you, so you can change your code to:

ngOnInit() {
  this.courseCards = this.coursecardService.getCourses();
}

answered Oct 25, 2017 at 3:07

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Coreylh · Accepted Answer · 2017-10-25 03:06:01Z

0

Nevermind, I read more about the .subscribe method. It returns a subscription object, I just needed to change it to:

ngOnInit() {
    this.courseCards = this.coursecardService.getCourses();
  }

answered Oct 25, 2017 at 3:06

Coreylh

1311 gold badge1 silver badge8 bronze badges

1 Comment

AVJT82 Over a year ago

Instead of writing your own answer, you could accept the answer with the exact same piece of code that Nicholas Tower gave you :)

i3lai3la · Accepted Answer · 2017-10-25 03:07:59Z

0

Is your list properties name is correct? let course of courses or supposed to be let course of courseCards?

   <ul>
      <li *ngFor="let course of courseCards|async">
        <app-course-card [name]='course.name' [wordcount]=0></app-course-card>
      </li>
    </ul>

answered Oct 25, 2017 at 3:07

i3lai3la

9806 silver badges10 bronze badges

1 Comment

Coreylh Over a year ago

Haha good spot, I found that after fixing the subscription problem.

Chandru · Accepted Answer · 2017-10-25 03:10:58Z

0

Try like this :

getCourses(): Observable<CourseCard[]> {
    return this.http.get(this.URL)
        .map((response) => <CourseCard[]>response.json())
        .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}

answered Oct 25, 2017 at 3:10

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

Cannot assign Object[] to Observable<Object[]>

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related