我正在开始我的第一个Angular2 (rc.6)项目。我有一个JSON对象被成功地发送到一个组件,但我无法访问模板中它的键值。
服务(摘录):@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 Don't Mean A Thing"…}并且不会抛出错误。但是其他的var键不会被渲染。
任何想法?
您需要使用.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;
});
}
});
}