angular - उपयोगकर्ता के वर्तमान स्थान के आधार पर बैकएंड से परिणाम प्रदर्शित करने के लिए कोणीय सामग्री 2 तालिका का उपयोग करना



हिंदी में युग्मन परिभाषा (1)

आखिरकार मैं होम पेज पर प्रदर्शित होने वाली जानकारी प्राप्त कर सकता हूं, लेकिन अजीब व्यवहार होता है, कृपया इस लिंक को देखें: कोणीय सामग्री 2 तालिका (कांगारू 2 / स्प्रिंग बूट बैकएंड) का उपयोग करते हुए अजीब व्यवहार

यह लगभग एक ही प्रश्न है जैसा कि टाइपस्क्रिप्ट रिक्त स्थान और परिणाम प्राप्त करने के लिए और बैकेंड पास करता है और सामग्री तालिका डेटा स्रोत को पास करता है , लेकिन इस सवाल का मुझे सिर्फ जवाब मिला है कि वर्तमान स्थान कैसे प्राप्त किया जाए और बैकएंड पास किया जाए और यह किसके द्वारा काम करता है स्वतंत्रता का उत्तर इसलिए मैं यह पूछता हूं ...

यहाँ समस्या है: मैं रेस्तरां की सूची प्रदर्शित करने के लिए कोनेरी मटेरियल 2 टेबल का उपयोग करना चाहता हूं (जो कि मेरे वसंत-बूट बैकएंड से आया है)। और वे ट्यूटोरियल जिस पर उन्होंने गिटब पर दिया था, डेटा स्रोत को देखने योग्य होना चाहिए, जो कि समझ में आता है, क्योंकि आप स्तंभ को सॉर्ट कर सकते हैं या डेटा को उस तरह से फ़िल्टर कर सकते हैं। लेकिन जब मैं वर्तमान स्थान के साथ एकीकृत करने की कोशिश करता हूं, मुझे नहीं पता कि यह कैसे काम करे ...

परिदृश्य, जो मैंने जुड़ा हुआ प्रश्न के समान है, जो उपयोगकर्ता का वर्तमान स्थान प्राप्त करने की कोशिश करता है, और एक बार इसे स्थान मिला (उदाहरण के लिए, lat=123 और lon=123 ), मैं इस दो मापदंडों को अपने बैकएंड पते में पास कर दूँगा: http://localhost:8080/api/search/location?lat=123&lon=123 , और यह रेस्तरां की एक सूची वापस कर देगा, और मुझे किसी भी तरह अवलोकन करने के लिए बदलने की जरूरत है ताकि connect() करने के connect() ExampleDataSource connect() FunctionDataSource में काम करता है

नीचे दिए गए कोड में मैंने पहले ही कोशिश की है, लेकिन मैं विफल रहा हूं, डेटा स्रोत को कुछ भी वापस नहीं मिला

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

गिथूब में पूर्ण कोड: https://github.com/zhengye1/Eatr/tree/dev





angular-material2