angle 4 observable returns [オブジェクトオブジェクト]

Question

私はフロントエンドとして角度4を使用し、安らかなAPIとしてLaravel 5.5を使用しています。バックエンドは細かいWRTの問題は、私はカールのリクエストを送信し、私は、2キーと値のペアを持つJSON期待する正確に何を取り戻すことができそうです：私がしようとすると

[{"id":1,"name":"Mr. Nice"}]

をし、私が手の角度でこれを行います次

HERO: [object Object] HERO.ID: HERO.NAME

私のサービス（私はちょうど参照の要求を取得する作業を含む）：

getHeroes(): Observable<Hero[]> { 
    return this.http.get<Hero[]>(this.heroesUrl).pipe(
     tap(heroes => this.log(`fetched heroes, ${this.heroesUrl}`)), 
     catchError(this.handleError('getHeroes', [])) 
    ); 
} 

/** ISSUE HERE */ 
getHero(id: number): Observable<Hero> { 
    const url = `${this.heroesUrl}/${id}`; 
    return this.http.get<Hero>(url).pipe(
     tap(_ => this.log(`fetched hero id=${id}, ${url}`)), 
     catchError(this.handleError<Hero>(`getHero id=${id}`)) 
    ); 
} 

コンポーネント：

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

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

    @Input() 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) 
      .subscribe(hero => this.hero = hero); 
    } 

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

テンプレート：

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

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

クラス：私は、単一のインスタンスとしてJSONを認識していない角度何らかの理由で伝えることができるものから、

export class Hero { 
    id: number; 
    name: string; 
} 

クラスHero、テンプレート内の*ngIf=がトリガーされます。サービス内のgetHeroes関数が動作し、複数のエントリを返し、テンプレート内でループします。行方不明であることがかなり明らかですか？

私は非常に角度がないので、どんな助けにも感謝します。

ありがとうございました。

Answer 1

あなたが受け取っているものは、配列内のオブジェクトで、あなたのビューにが表示されます。