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.
<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);
}
}