Angular2（rc.6）JSONオブジェクトキーにアクセスできません

Question

私は最初のAngular2（rc.6）プロジェクトを開始しています。 JSONオブジェクトがコンポーネントに正常に送信されましたが、テンプレートのキー値にアクセスできません。

SERVICE（抜粋）：

@Injectable() 
export class SongService { 
    constructor(private http: Http) { } 

    getSong(id: number): Promise<Song> { 
    let url = '/maxapirest/v1/maxmusic/song/'+id 
    console.log(url) 
    return this.http 
     .get(url) 
     .toPromise() 
     .then(function(response) { 
      console.log(response.json()); 
      return response.json(); 
     }) 
    } 

COMPONENT（抜粋）：

@Component({ 
    selector: 'my-song-reading', 
    templateUrl: STATIC_URL+'song-reading.component.html', 
    providers: [ SongService ], 
}) 

export class SongReadingComponent implements OnInit { 
    song: Promise<Song>; 
    constructor(
    private songService: SongService, 
    private route: ActivatedRoute) { } 

    ngOnInit(): void { 
    this.route.params.forEach((params: Params) => { 
     if (params['id'] !== undefined) { 
     let id = +params['id']; 

     this.song = this.songService.getSong(id) 
     } 
    }); 

    } 

〜

TEMPLATE（抜粋）：

<div *ngIf="song"> 
    {{ song | async | json }}<br/><br/><br/> 
    {{ song.title | async}} 
    {{ song.image | async }} 
    {{ song.id | async}} 
</div> 

私は理解できない問題それは{{歌| json}}はJSONオブジェクトを正しく出力します。 {"id"：71、 "title"： "それは意味しません" ...} エラーはスローされません。 しかし、他のvarキーはレンダリングされません。

アイデア？

Answer 1

あなたは.then(...)を使用して、そこに値を代入する必要があります。

ngOnInit(): void { 
    this.route.params.forEach((params: Params) => { 
     if (params['id'] !== undefined) { 
     let id = +params['id']; 

     this.songService.getSong(id) 
     .then(json => { 
      this.song = json; 
     }); 
     } 
    }); 
    }