Question

我已经写下了一个组件和一个服务来显示某个对象的细节，但是当在控制台中订阅和查看时它显示未定义。我已经尝试了很多，任何帮助都会受到赞赏。

我已经在下方展示了所有组件和服务，看看我是否在这里犯了任何错误。

我的组件如下： -

import { Component, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { filter, map } from 'rxjs/operators';

import { HeroService }  from '../heroes/hero.service';
import { Hero } from '../hero';

@Component ({
selector : 'app-hero-detail',
templateUrl : './hero-detail.component.html'
})

export class HeroDetailComponent {
//@Input() hero : Hero; 
hero : Hero; 
constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) {}

  ngOnInit(): void {

    this.getHero();
  }

  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');

    this.heroService.getHero(id).map(hero => {this.hero = hero;console.log(hero);}).subscribe();
  }

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

我的服务如下： -

import { HttpClient } from "@angular/common/http";
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/find';
import 'rxjs/add/operator/map';

import { Hero } from '../hero';


import { MessageService } from './message.service';

@Injectable()

export class HeroService  {
hero : Hero;
private heroesUrl = 'assets/api/mock-heroes.json';
constructor(private _http: HttpClient, public messageService : MessageService) { }

getHeroes(): Observable <Hero[]> {
this.messageService.add('HeroService: fetched heroes');
return this._http.get<Hero[]>(this.heroesUrl);
//return of(HEROES);
}

getHero(id: number): Observable<Hero> {
// Todo: send the message _after_ fetching the hero
this.messageService.add(`HeroService: fetch hero id=${id}`);
return this._http.get<Hero>(this.heroesUrl).find(hero => hero.id === id);
}

}

这是我的数据集： -

[
 { "id": "11", "name": "Mr. Nice" },
 { "id": "12", "name": "Narco" },
 { "id": "13", "name": "Bombasto" },
 { "id": "14", "name": "Celeritas" },
 { "id": "15", "name": "Magneta" },
 { "id": "16", "name": "RubberMan" },
 { "id": "17", "name": "Dynama" },
 { "id": "18", "name": "Dr IQ" },
 { "id": "19", "name": "Magma" },
 { "id": "20", "name": "Tornado" }
]

以下是我的模板： -

<div *ngIf="hero">

<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>

<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>

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

</div>

Answer 1

你的JSON包含一系列英雄。所以

return this._http.get<Hero>(this.heroesUrl).find(hero => hero.id === id)

不可能是正确的：HTTP observable发出单个事件，这是一个英雄阵列。正如您的代码所期望的那样，它不会发出多个事件，每个事件都是一个Hero。

应该是什么

return this._http.get<Array<Hero>>(this.heroesUrl)
  .map(heroes => heroes.find(hero => hero.id === id));

此外，该行

this.heroService.getHero(id).map(hero => {this.hero = hero;console.log(hero);}).subscribe();

应该是

this.heroService.getHero(id).subscribe(hero => this.hero = hero);

你滥用map()，应该用来将事件转换成其他东西，而不是产生副作用。

Angular observable subscribe显示未定义

1 个答案: