使用angular material 2 table根据用户当前位置显示后端的结果 [英] Using angular material 2 table to display the result from backend based on user's current location

问题描述

这与 Typescript getCurrent location and pass to backend to get results and pass to Material Table data source，但是这个问题我只得到了如何获取当前位置并传递到后端以及哪个的答案它通过自由的回答起作用.所以我问这个...

This is the almost same question as Typescript getCurrent location and pass to backend to get the result and pass to Material Table data source, but this question I only got the answer for how to get the current location and pass to backend and which it works by libertyernie's answer. Therefore I ask this one...

问题来了:我想使用 Angular Material 2 表来显示餐厅列表(来自我的 spring-boot 后端).根据他们在 github 上提供的教程，数据源必须是可观察的，这是有道理的，因为您可以对列进行排序或过滤数据.但是当我尝试与当前位置集成时，我不知道如何使其工作...

Here is the issue: I want to use Angular Material 2 table to display the list of restaurant (which is come from my spring-boot backend). And based on the tutorial they gave on github, the data source must be observable, which is make sense, because you can sort column or filter the data something like that. But when I try to integrate with current location, I don't know how to make it work...

场景与我链接的问题相同，即尝试获取用户的当前位置，并在获取位置后(例如，lat=123 和 lon=123)，我将这两个参数传递给我的后端地址:http://localhost:8080/api/search/location?lat=123&lon=123，这将返回一个Restaurant 列表，我需要以某种方式更改为 Observable，以便 ExampleDataSource 中的 connect() 函数工作.

The scenario is same as the question I linked, which is try to get user's current location, and once it got the location (for example ,lat=123 and lon=123), I will pass this two parameters into my backend address: http://localhost:8080/api/search/location?lat=123&lon=123, and this will return a list of Restaurant, and I need to somehow change to Observable so that the connect() function in ExampleDataSource works.

下面的代码是我已经尝试过的，但是我失败了，数据源一无所获.

The code below is what I already tried, but I am failed, the datasource get nothing back.

import { Component, OnInit } from '@angular/core';
import { Http, Response, URLSearchParams } from '@angular/http';
import { DataSource } from '@angular/cdk';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import { Restaurant } from '../restaurant/restaurant';
import { Category } from '../category/category';
import { RestaurantService } from '../restaurant/restaurant.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  displayedColumns = ['Id', 'Name', 'Category', 'Address', 'City'];
  exampleDatabase: ExampleHttpDatabase | null;
  dataSource: ExampleDataSource | null;
  location: CurrentLocation | null;
  lat: any;
  lon: any;
  result: Promise<any>;

  constructor(http: Http) {
    this.exampleDatabase = new ExampleHttpDatabase(http);
    this.dataSource = new ExampleDataSource(this.exampleDatabase);
    this.location = new CurrentLocation(http);
  }

  ngOnInit() {
    this.result = this.location.getCurrentLocation(this.lat, this.lon);
    this.result.then(function(result){
      console.log(result._body);
    })
    console.log(this.lat, this.lon);
    this.dataSource.connect();
  }
}

export class ExampleHttpDatabase {
  private restaurantUrl = 'api/restaurant'; // URL to web API
  getRestaurants(): Observable<Restaurant[]> {
    var result = this.http.get(this.restaurantUrl)
      .map(this.extractData);
    result.toPromise();
    return result;
  }

  extractData(result: Response): Restaurant[] {
    return result.json().map(restaurant => {
      return {
        id: restaurant.id,
        name: restaurant.restaurant_name,
        category: restaurant.category.map(c => c.categoryName).join(','),
        address: restaurant.address.address,
        city: restaurant.address.city.city_name
      }
    });
  }
  constructor(private http: Http) { }
}

export class CurrentLocation {
  constructor(private http: Http) { }
  private lat: any;
  private lon: any;
  private params = new URLSearchParams();
  private url = 'api/search/location';


  getPosition = () => {
    var latitude, longitude;
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition((position) => {
        resolve(position.coords);
      }, (err) => {
        reject(err);
      });
    })
  }
  async getCurrentLocation(lat, lon): Promise<any> {
    let coords = await this.getPosition();
    lat = this.lat = coords['latitude'];
    lon = this.lon = coords['longitude'];
    this.params.set('lat', this.lat);
    this.params.set('lon', this.lon);
    var result = this.http.get(this.url, { search: this.params });
    return await result.toPromise();
  }
}

export class ExampleDataSource extends DataSource<Restaurant> {
  constructor(private _exampleDatabase: ExampleHttpDatabase) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<Restaurant[]> {
    return this._exampleDatabase.getRestaurants();
  }

  disconnect() { }
}

完整代码也在 Github:https://github.com/zhengye1/Eatr/tree/dev

Full code also in Github: https://github.com/zhengye1/Eatr/tree/dev

推荐答案

终于可以把信息显示到首页了，但是出现了奇怪的行为，请看这个链接:使用 Angular Material 2 表时的奇怪行为(Angular 2/Spring Boot 后端)

Finally I can get the information to display to the home page, but weird behavior happens, please see this link : Weird behavior when using Angular Material 2 table (Angular 2/Spring Boot backend)

这篇关于使用angular material 2 table根据用户当前位置显示后端的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！