Angular5 - Опрос JSON с HttpClient - PullRequest
       8

Angular5 - Опрос JSON с HttpClient

0 голосов
/ 24 апреля 2018

Я использую Angular5 с HttpClient в сервисе. Мой сервис (спасибо Резе):

...
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMapTo';
import 'rxjs/add/observable/timer';
export interface Spot {
    lat: number,
    lng: number,
    spotname: sring
}
tempspots: <Spot[]>
@Injectable()
export class SpotService {
   private spoturl = '<JSON SERVICE URL>';
   constructor(
      private http: HttpClient,
      ...
   ) {}
   onGetBoundsSpots(minlat, maxlat) : Observable<Spot[]> {
      return 
       Observable.timer(0, 10000).mergeMapTo(  // ADDED TO POLL every 10 sec
       this.http
      .get<Spot[]>(this.spoturl)
       )   // ADDED TO POLL
      .map(spots => {
         return spots.filter(spot => { 
            return spot.lat > minlat && spot.lat < maxlat;
         })
      })
   }
}

Это прекрасно работает без опроса

НО я хочу опрашивать этот сервис каждые 10 секунд. Поэтому я добавил выше // ДОБАВЛЕНО В ОПРОС

ПРОБЛЕМА. Когда я отображаю эту информацию (_restrictspots) в html-шаблоне, _restrictspots изменяются при каждом опросе со всех точек (без фильтра) на только отфильтрованные пятна: для фильтрации точек отображаются несколько секунд, и пятна отображаются во время этого процесса.

Конечно, я хочу отображать ТОЛЬКО ОТфильтрованные пятна ... Отображать отфильтрованные пятна только в ??? Завершено ??? как то так.

Мой компонент:

import { SpotService, Spot } from '../../../shared/spot/spot.service
@Component({
...
template: '<div>Count : {{ _restrictspots.length }}</div>
  <div *ngFor="let spot of _restrictspots" ><p>{{ spot.spotname }}</p></div>
  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" 
  (boundsChange)="boundsChange($event)"</agm-map>',
  ...
})
export class SidebarComponent implements OnInit {
   lat: number = 50;
   lng: number = 4;
   zoom: number = 12;
   constructor(private spotserv: SpotService) {}
   onRestrictBounds(bounds) {
      this.spotserv.onGetBoundsSpots(bounds.getSouthWest().lat(),bounds.getNorthEast().lat()).
      subscribe(
         resarray => {
           this._restrictspots = resarray;
         }
      )
   }
   boundsChange(bounds) {
     this.onRestrictBounds(bounds);
   }

   ngOnInit() {
   }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...