角度显示Django Rest Framework json

Question

我对AngularJS很新，所以请原谅这个问题的简单性。

我正在使用Django Rest Framework并试图通过Angular JS提取细节并显示它们。我正在复制另一个项目，只是尝试扩展它以便学习。我有以下文件：

酒吧details.ts

export interface BarDetails {
    id?: number;
    name: string;
    address: string;
    description?: string;
    type?: string;
    openingTime?: number;
    closingTime?: number;
  }

酒吧details.provider.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { BarDetails } from './bar-details';
import 'rxjs/add/operator/map';
import { environment } from '../../environments/environment';

@Injectable()
export class BarDetailsProvider {

  constructor(private http: Http) { }

  getBarDetails(): Observable<BarDetails[]> {
    return this.http.get(`${environment.baseUrl}/bar/1`).map(response => response.json().results as BarDetails[]);
  }
}

酒吧details.components.ts

import { Component, OnInit } from '@angular/core';
import { BarDetails } from './bar-details';
import { BarDetailsProvider } from './bar-details.provider';

@Component({
  selector: 'app-bar-details',
  templateUrl: './bar-details.component.html',
  styleUrls: ['./bar-details.component.scss']
})
export class BarDetailsComponent implements OnInit {

  barDetails: BarDetails[] = [];

  constructor(private barDetailsProvider: BarDetailsProvider) { }

  ngOnInit() {
    this.barDetailsProvider.getBarDetails().subscribe(barDetails => this.barDetails = barDetails);
  }

}

酒吧details.component.html

<div *ngIf="barDetails">
  <h1>{{barDetails.name}}</h1>
  <div>Address: {{barDetails.address}}</div>
</div>

我的查询（现在总是返回pk = 1）返回：{"pk":1,"name":"Carpe Diem","description":"Moderno local con mobiliario minimalista, mesas altas y sofás.","address":"Calle Dr. Fleming, 11","type":"Pub","openingTime":9,"closingTime":24}

我的浏览器显示空白页面。这是生成的HTML。

<app-bar-details _nghost-c1=""><!--bindings={}-->
</app-bar-details>

在哪里我认为会显示酒吧名称和地址。我错了什么？

Answer 1

这是我出错的地方：

@Injectable()
export class BarDetailsProvider {

  constructor(private http: Http) { }

  getBarDetails(): Observable<BarDetails[]> {
    return this.http.get(`${environment.baseUrl}/bar/1`).map(response => response.json().results as BarDetails[]);
  }
}

应该

@Injectable()
export class BarDetailsProvider {

  constructor(private http: Http) { }

  getBarDetails(): Observable<BarDetails> {
    return this.http.get(`${environment.baseUrl}/bar/1`).map(response => response.json() as BarDetails);
  }
}

与barDetails不是一个跟随其他文件的数组。