Ionic3编码 - 试图检索当天的报价

Question

provider.ts文件中的代码：

getQuotes() : Observable<any> {  
    return this.http.get(""); 
}

第一种方法：需要显示报价的页面的home.ts文件中的编码：

quote:string;
author:string;
constructor(public navCtrl: NavController, private qp: QuoteProvider) { }
ionViewDidLoad()
{
   this.qp.getQuotes().subscribe(data => {
      this.quote = data.quote;
      this.author = data.author;      
   });
}

.html代码尝试了这个没有任何效果：

<h2> {{ quote}} </h2>
<h3> {{ author }}</h3>
</ion-item>    </ion-list>

尝试了第二种方法;尝试使用数组，尽管数据不是数组格式 home.ts文件：

export class HomePage {  quote:any[];  author:any[];    
constructor(public navCtrl: NavController, private qp: QuoteProvider) {  }
ionViewDidLoad() {
    this.qp.getQuotes().subscribe(data => {
       this.quote = data.quotes;
       this.author = data.quotes;
    });  
}

.html文件代码*：

<ion-list>
   <ion-item *ngFor = "let q of quote">
      <h2> {{ q.quote}} </h2>
      <h3> {{q.author }}</h3>
   </ion-item>    
</ion-list>

Answer 1

在provider.ts中，您应该执行以下操作：

import 'rxjs/add/operator/map';
getQuotes(){
   return this.http.get("").map(res => res.json());
}

然后在home.ts

ionViewDidLoad()
{
  this.qp.getQuotes().subscribe(data => {
    this.quote = data.contents.quotes[0].quote;
    this.author = data.contents.quotes[0].author;   
    // This is assuming the quotes array always has only one quote
  });
}

编辑
正如Prerak Tiwari评论的那样，您还需要删除home.html中的for循环：

<ion-list>
  <ion-item>
    <h2> {{ quote }} </h2>
    <h3> {{ author }}</h3>
  </ion-item>    
</ion-list>