Я использую 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() {
}
}