怪異的行爲採用了棱角分明材料2臺（角2 /彈簧引導後端）時

Question

繼續到Using angular material 2 table to display the result from backend based on user's current location

我這段代碼的目的是當用戶進入該網站，它會嘗試詢問用戶當前位置。一旦我的前端獲得當前的經緯度，它將傳遞到後端，根據用戶的位置獲取最近的餐廳，並使用角度材質表來顯示它。但是當我在Chrome上進行測試時，出現了奇怪的行爲，主頁第一次不會立即顯示結果，嘗試刷新，不起作用，唯一讓它工作的方式是切換另一個選項卡，然後返回到此頁面，它將在角度材料表中顯示結果。

這裏是home.component.ts代碼

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 'rxjs/add/observable/frompromise'; 
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']; 
    dataSource: ExampleDataSource | null; 

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

    } 

    ngOnInit() { 
    this.dataSource.connect(); 
    } 
} 

export class ExampleDataSource extends DataSource<Restaurant> { 
    private url = 'api/search/location'; 
    private params = new URLSearchParams(); 
    private lat; 
    private lon; 
    constructor(private http: Http) { 
    super(); 
    } 

    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<Restaurant[]> { 
    // var location; 
    // if (navigator.geolocation){ 
    // var options = {timeout: 60000}; 
    // location = navigator.geolocation.getCurrentPosition((position)=>{ 
    //  return position; 
    // },(err) =>{ 
    //  console.log("Error") 
    // }, options); 
    // } 
    // console.log("Locations: " + location); 
    var result = this.getCurrentLocation().then((res) => 
    { 
     return res; 
    }); 
    return Observable.fromPromise(result); 
    } 


    disconnect() { } 
    getPosition =() => { 
    var latitude, longitude; 
    return new Promise((resolve, reject) => { 
     navigator.geolocation.getCurrentPosition((position) => { 
     resolve(position.coords); 
     }, (err) => { 
     reject(err); 
     }); 
    }) 
    } 
    async getCurrentLocation(): Promise<Restaurant[]> { 
    let coords = await this.getPosition(); 
    this.lat = coords['latitude']; 
    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 }).map(this.extractData); 
    return await result.toPromise(); 
    } 
    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.cityName 
     } 
    }); 
    } 
} 

我不知道我做錯了什麼..有人可以幫助我嗎？有關完整代碼，請參閱https://github.com/zhengye1/Eatr/tree/dev

Answer 1

終於解決了....

所有我需要HomeComponent類做的只是改變ngOnInit到以下

async ngOnInit() { 
    await this.dataSource.connect(); 
} 

和它的作品。不知道爲什麼...