Angular 离子角度数据绑定错误

大家好，我正在学习，我有一个问题要显示我的api结果（最后一个fm）我的控制台。记录数据没有任何问题，但绑定时会出错 这里是我的模板 results.html

结果
{{艺术家| json}
{{artist.bio}}

这是我的结果。ts

    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,LoadingController } from 'ionic-angular';
import { MusicserviceProvider } from '../../providers/musicservice/musicservice';
import {Artist} from '../../pages/models/artist.interface';  

/**
 * Generated class for the ResultsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-results',
  templateUrl: 'results.html',
})
export class ResultsPage {
 artistname:String;
 artist:Artist;
 loading:any;

  constructor(private musicservice:MusicserviceProvider,private navCtrl: NavController, private navParams: NavParams, private loadingCtrl :LoadingController) {
    this.loading = this.loadingCtrl.create({
      content: `
      <ion-spinner ></ion-spinner>`
    });


  }

getUserInformation():void {
  this.musicservice.getArtiseInfo(this.artistname).subscribe((data => this.artist = data));
  console.log(this.artist);

}


  ionViewDidLoad() {
  this.artistname = this.navParams.get('artistname');
  if(this.artistname)
  this.getUserInformation() ;
 }

}

import { Injectable } from '@angular/core';
import { Http ,Response } from '@angular/http';
import {Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
//import 'rxjs/add/operator/do';
import 'rxjs/add/Observable/of';
import 'rxjs/add/Observable/throw';

import {Artist} from '../../pages/models/artist.interface';  

@Injectable()
export class MusicserviceProvider {
  private base_url :String ="http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist";
  private base_url2 :String ="api_key=b016b736378ec88dc30c36e4cc6e936b&format=json";

  constructor(private http: Http) {
    console.log('Hello MusicserviceProvider Provider');
  }

  getArtiseInfo(artist:String):Observable<Artist>{
    return this.http.get(`${this.base_url}=${artist}&${this.base_url2}`)
    //.do((data:Response)=> console.log(data))
    .map((data:Response) => data.json())
   // .do((data:Response)=> console.log(data))
    .catch((error:Response) =>Observable.throw(error.json().error || "server error")) 
  }
}

从'@angular/core'导入{Component}；
从“ionic angular”导入{IonicPage、NavController、NavParams、LoadingController}；
从“../../providers/musicservice/musicservice”导入{musicservice Provider}”；
从“../../pages/models/Artist.interface”导入{Artist}；
/**
*为ResultsPage生成的类。
*
*看http://ionicframework.com/docs/components/#navigation 更多信息
*在爱奥尼亚网页和导航上。
*/
@IonicPage（）
@组成部分({
选择器：“页面结果”，
templateUrl:'results.html'，
})
导出类结果页面{
艺人名称：弦；
艺术家：艺术家；
装载：任何；
构造函数（专用musicservice:musicservice Provider、专用navCtrl:NavController、专用navParams:navParams、专用loadingCtrl:LoadingController）{
this.loading=this.loadingCtrl.create({
内容：`
`
});
}
getUserInformation（）：void{
this.musicsservice.getArtiseInfo（this.artistname）.subscribe（（data=>this.artist=data））；
console.log（this.artist）；
}
ionViewDidLoad（）{
this.artistname=this.navParams.get（'artistname'）；
if（本艺人姓名）
这是.getUserInformation（）；
}
}

这是我的服务

    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,LoadingController } from 'ionic-angular';
import { MusicserviceProvider } from '../../providers/musicservice/musicservice';
import {Artist} from '../../pages/models/artist.interface';  

/**
 * Generated class for the ResultsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-results',
  templateUrl: 'results.html',
})
export class ResultsPage {
 artistname:String;
 artist:Artist;
 loading:any;

  constructor(private musicservice:MusicserviceProvider,private navCtrl: NavController, private navParams: NavParams, private loadingCtrl :LoadingController) {
    this.loading = this.loadingCtrl.create({
      content: `
      <ion-spinner ></ion-spinner>`
    });


  }

getUserInformation():void {
  this.musicservice.getArtiseInfo(this.artistname).subscribe((data => this.artist = data));
  console.log(this.artist);

}


  ionViewDidLoad() {
  this.artistname = this.navParams.get('artistname');
  if(this.artistname)
  this.getUserInformation() ;
 }

}

import { Injectable } from '@angular/core';
import { Http ,Response } from '@angular/http';
import {Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
//import 'rxjs/add/operator/do';
import 'rxjs/add/Observable/of';
import 'rxjs/add/Observable/throw';

import {Artist} from '../../pages/models/artist.interface';  

@Injectable()
export class MusicserviceProvider {
  private base_url :String ="http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist";
  private base_url2 :String ="api_key=b016b736378ec88dc30c36e4cc6e936b&format=json";

  constructor(private http: Http) {
    console.log('Hello MusicserviceProvider Provider');
  }

  getArtiseInfo(artist:String):Observable<Artist>{
    return this.http.get(`${this.base_url}=${artist}&${this.base_url2}`)
    //.do((data:Response)=> console.log(data))
    .map((data:Response) => data.json())
   // .do((data:Response)=> console.log(data))
    .catch((error:Response) =>Observable.throw(error.json().error || "server error")) 
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
//导入'rxjs/add/operator/do'；
导入“rxjs/add/Observable/of”；
导入“rxjs/add/Observable/throw”；
从“../../pages/models/Artist.interface”导入{Artist}；
@可注射（）
导出类MusicserviceProvider{
专用基本url:字符串=”http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist";
private base_url2:String=“api_key=b016b736378ec88dc30c36e4cc6e936b&format=json”；
构造函数（专用http:http）{
log（'Hello MusicserviceProvider Provider'）；
}
getArtiseInfo（艺术家：字符串）：可观察{
返回this.http.get（`this.base\u url}=${artist}&${this.base\u url2}`）
//.do（（数据：响应）=>console.log（数据））
.map（（数据：响应）=>data.json（））
//.do（（数据：响应）=>console.log（数据））
.catch（（error:Response）=>Observable.throw（error.json（）.error | |“服务器错误”））
}
}

我得到了结果，因为我说问题来了，我太喜欢显示器了。。

---

感谢等待

发生这种情况是因为在从http调用获取值之前加载了视图。在呈现模板之前，您必须等待数据进入。您可以通过

声明一个类布尔属性

private isDataAvailable:boolean=false;

一旦数据可用，将此变量设为true

getUserInformation(): void {
 this.musicservice.getArtiseInfo(this.artistname).subscribe((data => {
     this.artist = data;
     this.isDataAvailable = true;

 }));
 console.log(this.artist);

}

3.仅当数据可用时才呈现模板

<ion-content  class="home" *ngIf="isDataAvailable">
    <ion-list>
      <ion-item text-wrap > <!-- You can as well do *ngIf="artist?" here instead..-->
          {{artist | json}}
        <ion-avatar item-left>        </ion-avatar>
        <h2>
            {{artist.bio}}
        </h2>
      </ion-item>
    </ion-list>
  </ion-content>

{{艺术家| json}
{{artist.bio}}

同样，您也可以使用异步管道。您可以阅读相关内容

---

希望这有帮助。

它显示了什么错误？欢迎使用堆栈溢出！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参见：如何创建。使用“编辑”链接改进您的问题-不要通过评论添加更多信息。谢谢你也可以在你的模板中使用{{artist？.bio}}来尝试e。我试过了，但没有感谢你的帮助，但我试过了你提供的，但没有任何改变