角度不显示对象属性

时间:2019-03-17 16:20:34

标签: django angular django-rest-framework

我正在使用HeroTutorial,但使用的是Django后端。我有一个从DRF端点获取的Hero对象(已通过Postman验证)。在我的 hero-detail.html 中,hero.namehero.id没有显示任何内容。

我知道hero对象将传递到 hero-detail.html ,因为浏览器显示了“ Details”和“ id:”,因此行<div *ngIf="hero">告诉我有一个hero ..

但是如果有hero,为什么hero.name没有显示任何内容?

浏览器控制台中没有错误。链接到 hero-detail.component 的链接来自 dashboard.component ,该链接使用相同的方法,但出于某些原因hero.name和{{1 }}工作正常。 dashboard.component.html 正确显示,因此我知道我的服务运行正常。

我的 hero-detail.html

hero.number

hero-detail.component

<div *ngIf="hero">

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.number}}</div>
<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>

</div>

<button (click)="goBack()">go back</button>

dashboard.component

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero'
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService }  from '../hero.service';

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


  constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}

  @Input() hero: Hero;

  ngOnInit(): void {
    this.getHero();
  }

  getHero(): void {
    const number = +this.route.snapshot.paramMap.get('number');
    this.heroService.getHero(number)
      .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
  this.location.back();
}

  }

dashboard.html

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

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

  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
}

hero.service

<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <a *ngFor="let hero of heroes" class="col-1-4"
      routerLink="/detail/{{hero.number}}">
    <div class="module hero">
      <h1>{{hero.name}}</h1>
    </div>
  </a>
</div>
来自import { Injectable } from '@angular/core'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; import { Observable, of } from 'rxjs' import { HttpClient, HttpHeaders } from '@angular/common/http' import { catchError, map, tap } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class HeroService { private heroesUrl = 'http://127.0.0.1:8000/heroes/'; // URL to web api constructor( private http : HttpClient ) { } /** * Handle Http operation that failed. * Let the app continue. * @param operation - name of the operation that failed * @param result - optional value to return as the observable result */ getHeroes (): Observable<Hero[]> { return this.http.get<Hero[]>(this.heroesUrl) } getHero(number:number): Observable<Hero>{ return this.http.get<Hero>(`${this.heroesUrl}${number}`); } // getHero(number: number): Observable<Hero> { // return of(HEROES.find(hero => hero.number === number)); //} }

hero.service 端点响应,取自邮递员:

localhost:8000/heroes/2
来自邮递员的[ { "name": "better hero", "number": 2 } ]

也是 hero.service 端点响应:

localhost:8000/heroes

views.py

[
    {
        "name": "bad hero",
        "number": 7
    },
    {
        "name": "bad hero",
        "number": 7
    },
    {
        "name": "better hero",
        "number": 2
    }
]

1 个答案:

答案 0 :(得分:0)

看看您发布的示例API响应,看起来英雄的检索方法(例如,/ heroes / 2)返回仅包含一项的列表,而不是返回该项本身。但是,在客户端代码中,您期望使用英雄对象,而不是英雄列表。取决于您的客户端代码和一般的REST API,

localhost:8000 / heroes / 2应该返回

{
    "name": "better hero",
    "number": 2
}

不是

[
    {
        "name": "better hero",
        "number": 2
    }
]