Двухстороннее связывание данных изображений с использованием ngFor в angular 6 - PullRequest
Новая
       6

Двухстороннее связывание данных изображений с использованием ngFor в angular 6

0 голосов
/ 27 июня 2018

Я использую угловой 6 и бесконечный свиток . Запрашивая данные с помощью службы http, я могу связать данные (изображения) с dom на init. Но я получаю следующее количество записей в конце прокрутки, используя бесконечную прокрутку. При прокрутке я запускаю функцию и нажимаю на тот же массив, и это отражается в ts (проверено с помощью отладчика). Но не обязательный в Html. Возможно, возможно дублирование, но никакие решения не помогли мне. а также, пожалуйста, дайте правильный способ реализации метода debounce в 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>

ц 

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

  }
}
...