问题描述
当我想通过 REST API 从服务器接收数据并通过模态将其显示在 HTML 组件中时出现此错误。在控制台中,如果我获得了数据,但在我的 HTML 视图中没有。
providers/musics/musics.ts
const API:string ="https://webapi.bps.go.id/v1/api/domain/type/prov/prov/1300/key/790ab00650e59132961637e651ba47fb/";
@Injectable()
export class MusicsProvider {
constructor(public http: HttpClient) {
console.log('Hello MusicsProvider Provider');
}
getMusic(){
return this.http.get<any[]>(API);
}
home.ts
public allMusic =[];
constructor(public navCtrl: NavController,public loadingController:LoadingController,private musicProvider: MusicsProvider) {
}
ionViewDidLoad(){
let allMusicLoadingController = this.loadingController.create({
content: "getting your songs from server"
});
allMusicLoadingController.present();
this.musicProvider.getMusic()
.subscribe((musicList) =>
{
allMusicLoadingController.dismiss();
this.allMusic= musicList
});
}
home.html
<ion-content padding>
<ion-card *ngFor="let music of allMusic">
<ion-card-content>
<ion-card-title>{{music.domain_name}}</ion-card-title>
</ion-card-content>
</ion-card>
</ion-content>
这是json服务
{"status":"OK","data-availability":"available","data":[{"page":1,"pages":1,"total":34},[{"domain_id":"1100","domain_name":"Aceh","domain_url":"https:\/\/aceh.bps.go.id"},{"domain_id":"1200","domain_name":"Sumatera Utara","domain_url":"https:\/\/sumut.bps.go.id"},{"domain_id":"1300","domain_name":"Sumatera Barat","domain_url":"https:\/\/sumbar.bps.go.id"},{"domain_id":"1400","domain_name":"Riau","domain_url":"https:\/\/riau.bps.go.id"},{"domain_id":"1500","domain_name":"Jambi","domain_url":"https:\/\/jambi.bps.go.id"},{"domain_id":"1600","domain_name":"Sumatera Selatan","domain_url":"https:\/\/sumsel.bps.go.id"},{"domain_id":"1700","domain_name":"Bengkulu","domain_url":"https:\/\/bengkulu.bps.go.id"},{"domain_id":"1800","domain_name":"Lampung","domain_url":"https:\/\/lampung.bps.go.id"},{"domain_id":"1900","domain_name":"Kep. Bangka Belitung","domain_url":"https:\/\/babel.bps.go.id"},{"domain_id":"2100","domain_name":"Kep. Riau","domain_url":"https:\/\/kepri.bps.go.id"},{"domain_id":"3100","domain_name":"Dki Jakarta","domain_url":"https:\/\/jakarta.bps.go.id"},{"domain_id":"3200","domain_name":"Jawa Barat","domain_url":"https:\/\/jabar.bps.go.id"},{"domain_id":"3300","domain_name":"Jawa Tengah","domain_url":"https:\/\/jateng.bps.go.id"},{"domain_id":"3400","domain_name":"Di Yogyakarta","domain_url":"https:\/\/yogyakarta.bps.go.id"},{"domain_id":"3500","domain_name":"Jawa Timur","domain_url":"https:\/\/jatim.bps.go.id"},{"domain_id":"3600","domain_name":"Banten","domain_url":"https:\/\/banten.bps.go.id"},{"domain_id":"5100","domain_name":"Bali","domain_url":"https:\/\/bali.bps.go.id"},{"domain_id":"5200","domain_name":"Nusa Tenggara Barat","domain_url":"https:\/\/ntb.bps.go.id"},{"domain_id":"5300","domain_name":"Nusa Tenggara Timur","domain_url":"https:\/\/ntt.bps.go.id"},{"domain_id":"6100","domain_name":"Kalimantan Barat","domain_url":"https:\/\/kalbar.bps.go.id"},{"domain_id":"6200","domain_name":"Kalimantan Tengah","domain_url":"https:\/\/kalteng.bps.go.id"},{"domain_id":"6300","domain_name":"Kalimantan Selatan","domain_url":"https:\/\/kalsel.bps.go.id"},{"domain_id":"6400","domain_name":"Kalimantan Timur","domain_url":"https:\/\/kaltim.bps.go.id"},{"domain_id":"6500","domain_name":"Kalimantan Utara","domain_url":"https:\/\/kaltara.bps.go.id"},{"domain_id":"7100","domain_name":"Sulawesi Utara","domain_url":"https:\/\/sulut.bps.go.id"},{"domain_id":"7200","domain_name":"Sulawesi Tengah","domain_url":"https:\/\/sulteng.bps.go.id"},{"domain_id":"7300","domain_name":"Sulawesi Selatan","domain_url":"https:\/\/sulsel.bps.go.id"},{"domain_id":"7400","domain_name":"Sulawesi Tenggara","domain_url":"https:\/\/sultra.bps.go.id"},{"domain_id":"7500","domain_name":"Gorontalo","domain_url":"https:\/\/gorontalo.bps.go.id"},{"domain_id":"7600","domain_name":"Sulawesi Barat","domain_url":"https:\/\/sulbar.bps.go.id"},{"domain_id":"8100","domain_name":"Maluku","domain_url":"https:\/\/maluku.bps.go.id"},{"domain_id":"8200","domain_name":"Maluku Utara","domain_url":"https:\/\/malut.bps.go.id"},{"domain_id":"9100","domain_name":"Papua Barat","domain_url":"https:\/\/papuabarat.bps.go.id"},{"domain_id":"9400","domain_name":"Papua","domain_url":"https:\/\/papua.bps.go.id"}]]}
解决方法
根据似乎的错误,您需要对数组而不是对象执行迭代。看起来像您需要按照以下步骤解决问题所需的附加代码。
您需要从 API 的响应中捕获数据 - 它包含对象数组。
//声明存储变量 pageList:any = [];
一旦 API 的响应得到您需要将数据对象数据分配到 pageList obj 中,就像这样。
this.pageList = response.data;
就是这样。