Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70434

Onscroll more image is not loading

$
0
0

@vishal14 wrote:

I am using news api so first loading 5 articles so once scroll then more articles load but only text is showing no image show on scroll.

image

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-card *ngFor="let article of data?.articles" (click)="onGoToNewsSinglePage(article)">
    <ion-img [src]="article.urlToImage"></ion-img>

    <ion-card-content>
      <ion-card-title>{{article.title}}</ion-card-title>

      <!-- <p>{{article.description}}</p> -->
      <p class="date">{{article.publishedAt | date:'medium'}}</p>
    </ion-card-content>
  </ion-card>

  <ion-infinite-scroll (ionInfinite)="loadMoreNews($event)">
    <ion-infinite-scroll-content loadingSpinner="bubble" loadingText="Loading More.."></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
export class Tab1Page implements OnInit {
data: any;
page = 1;
constructor(private newsService: NewsService, private router: Router) {}
ngOnInit() {
this.newsService
.getData(
  `everything?domains=wsj.com,nytimes.com&pageSize=5&page=${
    this.page
  }`
)
.subscribe(data => {
  console.log(data);
  this.data = data;
});
}
onGoToNewsSinglePage(article) {
  this.newsService.currentArticle = article;
  this.router.navigate(['/news-single']);
}
loadMoreNews(event) {
  this.page++;
  // console.log(event);
  this.newsService
    .getData(
      `top-headlines?country=in&pageSize=5&page=${
        this.page
      }`
    )
    .subscribe(data => {
      // console.log(data);
      // this.data = data;
      for (const article of data['articles']) {
        this.data.articles.push(article);
      }
      event.target.complete();
      // console.log(this.data);
    });
}

doRefresh(event) {
  setTimeout(() => {
    this.newsService
    .getData(
      `top-headlines?country=in&pageSize=5&page=${
        this.page
      }`),
    event.target.complete();
  }, 2000);
}
}

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70434

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>