reactivos - tablas dinamicas angular 4

Usar una tabla de material angular 2 para mostrar el resultado desde el backend en función de la ubicación actual del usuario

Question

Esta es casi la misma pregunta que Typescript getCurrent location y pass to backend para obtener el resultado y pasar a la fuente de datos de Material Table , pero esta pregunta solo obtuve la respuesta de cómo obtener la ubicación actual y pasar al back-end y cuál funciona. la respuesta de libertyernie. Por lo tanto, pregunto esto ...

Aquí está el problema: quiero usar la tabla de Material angular 2 para mostrar la lista del restaurante (que proviene de mi back-end de arranque de resorte). Y en base al tutorial que dieron en github, la fuente de datos debe ser observable, lo cual tiene sentido, porque puede ordenar la columna o filtrar los datos de una manera así. Pero cuando trato de integrarme con la ubicación actual, no sé cómo hacerlo funcionar ...

El escenario es el mismo que el de la pregunta que vinculé, que es intentar obtener la ubicación actual del usuario, y una vez que obtuvo la ubicación (por ejemplo, lat=123 y lon=123 ), pasaré estos dos parámetros a mi dirección backend: http://localhost:8080/api/search/location?lat=123&lon=123 , y esto devolverá una lista de Restaurant, y necesito cambiar de alguna manera a Observable para que funcione la función connect() en ExampleDataSource .

El código siguiente es lo que ya probé, pero he fallado, el origen de datos no me devolvió nada.

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() { }
}

Código completo también en Github: https://github.com/zhengye1/Eatr/tree/dev

Answer 1

Finalmente, puedo obtener la información para que se muestre en la página de inicio, pero ocurre un comportamiento extraño, consulte este enlace: Comportamiento extraño al usar la tabla de material angular 2 (motor de arranque angular 2 / Spring Boot)