Winkel 4.0 Bindung Ausgabe

Question

Ich versuchte Helden Tutorial von Angular Dokumentation zu folgen Angular dem Lernen zu beginnen, aber wenn ich einige Dinge begann zu ändern, traten einige Probleme:

• Für mein Projekt Rahmen Ich verwende Django Rest als Backend, Bereitstellung API zum Abrufen meiner "Bücher Artikel". Ich bin sehr neu in diesem, also möchte ich nur wissen, ob die API-Einrichtung korrekt war, aber ich weiß nicht wie.

• Ich begann mit der Implementierung von Modellen in Django, dann Serializer, ViewSet und schließlich die Urls.

• In eckig schrieb ich die Service-Komponente, für HTTP-Anfrage, und eine grundlegende HTML, um diesen Dienst zu nutzen und zeigen, dass die Kommunikation funktioniert.

• 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 Klasse Buch { id: number; Titel: Zeichenfolge; }

• bookservice.ts

  import {Injizierbare} von '@ Winkel/core'; importieren {Headers, Http} von '@ angular/http'; importiere 'rxjs/add/operator/toPromise'; Importiere {Buch} von './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'}); 
  } 
  

Wenn ich diesen Code ausführen Ich habe dies:

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

wie wenn Bindungen nicht funktioniert. Aber wenn ich in Chrome zu „Network“ gehe, kann ich die Liste der Bücher von meinem Server abgerufen sieht

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

Ich weiß nicht wirklich, was im falsch zu machen ... Vielen Dank für Ihre Zeit und sorry meine Englisch schlecht

Update: in der Konsole erscheint nun diese Zeile:

(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

in Ihrem Dienst in Ihrer getBooks Funktion, versuchen Sie dies:

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

Und legen Sie bitte das Protokoll in Ihre Ausgabe.Das Problem, das ich denke, ist, dass Sie data verwenden, aber Sie haben es wahrscheinlich nicht in Ihrer Antwort (zum Beispiel, in meinem aktuellen Projekt, setzen wir es auf content)