離子角度數據綁定錯誤

Question

你好每一個請在學習離子的過程中我有aproblem顯示我的結果api（最後一個FM）我console.log數據沒有任何問題，但當它來綁定它它得到錯誤 這裏我的模板 results.html

<ion-navbar color="dark"> 
    <ion-title>results</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content class="home"> 
    <ion-list> 
     <ion-item text-wrap > 
      {{artist | json}} 
     <ion-avatar item-left>  </ion-avatar> 
     <h2> 
      {{artist.bio}} 
     </h2> 
     </ion-item> 
    </ion-list> 
    </ion-content> 

這裏是我的results.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")) 
    } 
} 

我得到的結果，正如我所說的問題就來了我的顯示器這麼多.. 感謝等待

Answer 1

這是因爲視圖前裝值是從http調用中獲得的。您必須等待數據才能進入模板之前。您可以通過

1. 聲明一個類布爾屬性

   private isDataAvailable:boolean=false; 
   

2. 一旦數據可用使這個變量真。

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

3.Render只有當數據是可用的模板;

<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> 

您可以如用異步管的same.You可以讀到它here

希望這有助於。