@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.
<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
