Question

我正在使用HeroTutorial，但使用的是Django后端。我有一个从DRF端点获取的Hero对象（已通过Postman验证）。在我的 hero-detail.html 中，hero.name和hero.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
    }
]

Answer 1

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

localhost：8000 / heroes / 2应该返回

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

不是

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

角度不显示对象属性

1 个答案: