angular 4.0 binding issue

Question

I tried to follow Heroes Tutorial from Angular documentation to start learning Angular, but when I started changing few things, some issues occured:

For my project I'm using Django rest framework as backend, providing API for retrieving my "books items". I'm very new in this so I just want to know if the API set up were correct, but I don't know how.
I started implementing Models in django, then Serializers, ViewSet, and finally the Urls.
In angular I wrote the Service component, for http request, and a basic html to use this service and show that communication works.

appcomponent.ts

import { Component, OnInit } from '@angular/core';
import { BookService } from './book.service';
import { Book } from './book';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [BookService],

})
export class AppComponent implements OnInit {
  title = 'app works!';
  books : Book[] = [];
  constructor(private bookService : BookService) { }

  getBooks(): void {
    this.bookService.getBooks().then(books => this.books = books);
  }

  ngOnInit(): void {
    this.getBooks();
  }
}

appcomponent.html

<ul class="books">
      <li *ngFor="let book of books">
        <span class="badge">{{book.isbn}}</span> {{book.title}}
      </li>
    </ul>

book.ts

export class Book { id: number; title: string; }

bookservice.ts

import { Injectable } from '@angular/core'; import { Headers, Http } from '@angular/http'; import 'rxjs/add/operator/toPromise'; import { Book } from './book';

@Injectable()
export class BookService {

  private booksUrl = 'http://localhost:8000/api/books/';
  constructor(private http: Http) { }

  getBooks(): Promise<Book[]> {
    return this.http.get(this.booksUrl)
               .toPromise()
               .then(response => response.json().data as Book[])
               .catch(this.handleError);
  }
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }

  getBook(id:number): Promise<Book>{
    const url = `${this.booksUrl}/${id}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response.json().data as Book)
      .catch(this.handleError);
  }

  private headers = new Headers({'Content-Type': 'application/json'});
}

When I run this code I have this:

<ul _ngcontent-c0="" class="books">
      <!--bindings={}-->
    </ul>

like if bindings doesnt work. But if i go to "Network" in Chrome, I can see the list of books retrieved from my server

[{isbn: "123lko12d", book_title: "Analisi2", pub_date: "2017-06-09T10:12:00Z"},…]
0
:
{isbn: "123lko12d", book_title: "Analisi2", pub_date: "2017-06-09T10:12:00Z"}
book_title
:
"Analisi2"
isbn
:
"123lko12d"
pub_date
:
"2017-06-09T10:12:00Z"
1
:
{isbn: "isijh12432", book_title: "Fisica1", pub_date: "2017-05-17T16:11:02Z"}
book_title
:
"Fisica1"
isbn
:
"isijh12432"
pub_date
:
"2017-05-17T16:11:02Z"

I dont really know what im doing wrong... Thank you for your time and sorry my bad english

Update: in the console now appears this row:

(2) [Object,Object] book.service.ts

0:Object
book_title
:
"Analisi2"
isbn
:
"123lko12d"
pub_date
:
"2017-06-09T10:12:00Z"

1:Object
book_title
:
"Fisica1"
isbn
:
"isijh12432"
pub_date
:
"2017-05-17T16:11:02Z"

Unknown Unknown · Accepted Answer · 2017-06-09T11:38:17

In your service, in your getBooks function, try this :

getBooks(): Promise<Book[]> {
    return this.http.get(this.booksUrl)
           .toPromise()
           .then(response =>{
                console.log(response.json());
                return response.json() as Book[];
           })
           .catch(this.handleError);
}

And put the log in your issue please. The problem I think, is that you use data, but you probably don't have it in your response (for instance, in my current project, we set it to content)

angular 4.0 binding issue

1 Answers