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({ 
    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) 
     } 
    }); 

    } 

~

ШАБЛОН (выдержка):

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

Проблема, которую я не могу понять что {{song | json}} правильно выводит объект JSON: {"id": 71, "title": "It not not A Thing" ...} И ошибка не возникает. Но другие ключи 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; 
     }); 
     } 
    }); 
    }