Angular 显示 Django Rest Framework json答案

【问题标题】：Angular display Django Rest Framework jsonAngular 显示 Django Rest Framework json
【发布时间】：2023-03-14 03:56:01
【问题描述】：

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

我正在使用 Django Rest Framework 并尝试提取详细信息并通过 Angular JS 显示它们。我正在复制另一个项目，只是为了学习而尝试对其进行一些扩展。我有以下文件：

bar-details.ts

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

bar-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[]);
  }
}

bar-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);
  }

}

bar-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>

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

【问题讨论】：

你能看一下response.json() 打印的内容吗？
您可能正在返回一个对象数组？您将 barDetails 声明为一个数组，所以我假设您实际上并没有返回单个对象。如果是这样，您将需要使用 ngFor 来显示结果。此外，您可能想查看async pipe，因此您不必明确订阅您的 observable。
如何显示response.json()？
我试过*NgFor，但也没有用。我现在正在阅读异步管道。
您的控制台是否有任何错误

标签： angular

【解决方案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 不是跟随其他文件的数组。

【讨论】：