角4.0的結合問題

Question

我試圖按照從角文檔英雄教程開始學習角，但是當我開始改變一些事情，有些問題發生：

• 我的項目，我使用Django框架休息作爲後端，提供API來檢索我的「書籍項目」。 我很新，所以我只想知道API設置是否正確，但我不知道如何。

• 我開始在django中實現模型，然後是Serializers，ViewSet，最後是Url。

• 在angular中，我爲http請求編寫了Service組件，並且使用了基本的html來使用此服務並顯示通信正常。

• 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

  出口類書籍{ id：number; 標題：string; }

• bookservice.ts

  進口{注射}從 '@角/芯'; 從'@ angular/http'導入{Headers，Http}; import'rxjs/add/operator/toPromise'; 從'./book'導入{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'}); 
  } 
  

當我運行這段代碼我有這樣的：

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

一樣，如果綁定不工作。 但是如果我去「網絡」在Chrome中，我可以看到從我的服務器中檢索的圖書列表

[{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" 

我真的不知道我在做什麼錯...... 謝謝您的時間，對不起我的英語不好

更新：現在 在控制檯中顯示此行：

(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" 

Answer 1

在你的服務，你的getBooks功能，試試這個：

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

並把日誌在你的問題請。我想這個問題是，你使用data，但你可能沒有在你的迴應（例如，在我目前的項目中，我們將其設置爲content）