typescript - 在角度 6 中使用 ngFor 对图像进行两种方式数据绑定

Question

我正在使用 angular 6 和 无限滚动。使用 http 服务请求数据，我可以在初始化时将数据（图像）绑定到 dom。但我正在使用无限滚动获取滚动端的下一个记录数。在滚动时，我正在触发函数并推送到同一个数组，它反映在 ts 中（使用调试器检查）。但在 Html 中不绑定。它可能是重复的，但没有解决方案对我有帮助。还请给出正确的 Angular 6 中去抖动方法实现的方法，任何人都可以帮助
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>

ts

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

服务

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

  }
}

标签： typescriptangular6two-way-binding