angular 4.0绑定问题

Question

我试图按照Angular文档中的英雄教程开始学习Angular，但当我开始改变一些事情时，出现了一些问题：

>

对于我的项目，我使用Django rest框架作为后端，提供用于检索我的“书籍项目”的应用编程接口。我在这方面非常新，所以我只想知道API设置是否正确，但我不知道怎么做。

我开始在django中实现模型，然后是序列化器、视图集，最后是网址。

在angular中，我为http请求编写了服务组件，并编写了一个基本的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

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

>

book.ts

导出类Book{id： number； title： string；}

图书服务。ts

从'@角/核'导入{注入；从'@角/超文本传输协议'导入{Headers， Http}；导入'rxjs/add/操作员/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）