Two way data binding of images using ngFor in angular 6

问题

I am using angular 6 and infinite scroll. Requesting the data using http service, I am able to bind the data(images) to dom on init. But I am fetching the next number of records on scroll end using infinite scroll. On scroll of I am triggering the function and pushing to the same array, and it is reflecting in ts(checked using debugger). But not binding in Html. It may be possible duplicate, But no solutions helped me. and also please give the correct way of debounce method implementation in angular 6 can anyone please help
Html

<section class="main-container"  infiniteScroll infiniteScrollUpDistance]="1" 
[infiniteScrollThrottle]="300" (scrolled)="onScroll($event)">
 <ul class="grid-wrap">

  <li *ngFor="let image of flickrImages">
    <img [attr.src]="image.url_m" alt="Image not found" onerror="this.src='https://i5.walmartimages.com/asr/f752abb3-1b49-4f99-b68a-7c4d77b45b40_1.39d6c524f6033c7c58bd073db1b99786.jpeg?odnHeight=450&odnWidth=450&odnBg=FFFFFF';" >
  </li>
</ul>
</section>

reqObj : any = {
   per_page : 5,
   pageNo: 1,
   query: ''
 }
getImages(fromScroll){
this.reqObj['query'] = this.searchKeyword ? this.searchKeyword : '';
this.flickrService.getImages(this.reqObj).subscribe((res) => {
  if(res && res['stat'] ==='ok'){
    if(fromScroll){
      this.flickrImages.push(...res['photos']['photo'])          
      this.reqObj.pageNo++;
    } else{
      this.flickrImages = res['photos']['photo'];
      this.totalPages = res['photos']['pages']
    }
  }
 },(error) => {
   console.log(error);
 });
}
onScroll(ev) {
  if(ev.currentScrollPosition>=document.documentElement.scrollHeight && 
this.reqObj.pageNo < this.totalPages ){
    this.getImages(true);
   }
}

Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
// import 'rxjs/add/operator/map';

@Injectable({
providedIn: 'root'
})
 export class FlickrService {
constructor(private http:HttpClient) { }
  ApiUrl = "https://api.flickr.com/services/rest/?extras=url_m&api_key=4df09ecd4fb22d6b29e03658dfbca36f&format=json&nojsoncallback=1";
  getImages(reqObj){
    if(reqObj.query){
      return this.http.get(this.ApiUrl+'&per_page='+ reqObj.per_page+'&text='+reqObj.query+'&page='+reqObj.pageNo+'&method=flickr.photos.search');
    } else {
      return this.http.get(this.ApiUrl+'&per_page='+ reqObj.per_page+'&page='+reqObj.pageNo+'&method=flickr.photos.getRecent');
    }

  }
}

来源：https://stackoverflow.com/questions/51054052/two-way-data-binding-of-images-using-ngfor-in-angular-6

标签

typescript

angular6

two-way-binding