Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
384 views
in Technique[技术] by (71.8m points)

angular - Cannot display data of api on cards using ionic-http-plugin

I made a small application where want to display data from news-api on cards using ionic-http-plugin. But I am unable to display data on cards. Can someone tell what i am missing? I am unable to get data on home.page.ts using service

news.service

import { HTTP } from '@ionic-native/http/ngx;

export class NewsService {
  data: any;
  constructor(private http: HTTP) { }

  getData(url){
    return (
      this.http.get(`${API_URL}/${url}&apiKey=${API_KEY}`, {}, {})
        .then(res => {
          this.data = res.data;
          console.log(this.data);
        })
        .catch(error => {
          console.log(error.error); // error message as string
        })
  )}; 

home.page.ts

 export class HomePage {
    
      data: any;
      constructor(private newsService: NewsService) {
      }
    
      ngOnInit(){
       this.data = this.newsService
        .getData('top-headlines?country=in')
          .then(res => {
            console.log(res); //not getting data from news service
          })
      }

home.page.html

 <ion-card *ngFor="let article of data?.articles" (click)="visitLink(article)">
      <ion-img [src]="article.urlToImage"></ion-img>
      <ion-card-header>
         <ion-card-title>{{article.title}}</ion-card-title>
         </ion-card-header>
      <ion-card-content>
         {{article.description}}
         </ion-card-content>
     </ion-card> 
question from:https://stackoverflow.com/questions/66058625/cannot-display-data-of-api-on-cards-using-ionic-http-plugin

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...