angular - 使用 Angular HttpClient 过滤结果

Question

我将 Angular5 与 HttpClient 结合使用。我创建了一个从 JSON API URL 获取数据的服务。

这很完美。

但是现在，我想用一个标准来限制结果(spots.lat 必须是 > minlat 和 < maxlat)。

我尝试使用 map 和 forEach(请参阅下面 ?????? 之间的代码部分)，但它不起作用。我该如何纠正这个问题？

...
import { HttpClient } from '@angular/common/http';
export interface Spot {
    lat: number,
    lng: number,
    spotname: sring
}
tempspots: <Spot[]>

@Injectable()
export class SpotService {
   private spoturl = '<JSON SERVICE URL>';
   constructor(
      private http: HttpClient,
      ...
   ) {}
   onGetAllSpots(minlat : number, maxlat : number) : Observable<Spot[]> {
      return this.http
      .get<Spot[]>(this.spoturl)
// ?????
      .map(spots => {
          spots.forEach(spot => {
             if (spot.lat > minlat && spot.lat < maxlat) {
                this.tempspots.push(spot);
             }
          })
          return this.tempspots;
      })
// ?????
   }
}

Answer 1

把你的代码改成这样，它应该可以工作

.map(spots => {
          const tempspots: <Spot[]> = [];
          spots.forEach(spot => {
             if (spot.lat > minlat && spot.lat < maxlat) {
                tempspots.push(spot);
             }
          })
          return tempspots;
      })

另一种方法是使用过滤器

.map(spots => {
              return spots.filter(spot => { 
                  return spot.lat > minlat && spot.lat < maxlat;
              })
          })