Обновить Просмотр изменений в угловых 4 - PullRequest
Новая
       12

Обновить Просмотр изменений в угловых 4

0 голосов
/ 11 июня 2018

У меня есть компонент, который загружает данные из углового Firestore, который находится в Geopoint.Я использую AGM, чтобы геокодировать широту и долготу в форматированный адрес, который делается после того, как он загрузил все данные.Я хотел бы отобразить данные с адресом.

Мой ts код. 

address: any;

    constructor(private mapsAPILoader: MapsAPILoader) {}

    ngOnChanges() {
        this.address
        console.log('on changes==>', this.address)
    }

    ngOnInit() {
        this.route.params.forEach((urlParameters) => {
            this.myId = urlParameters['Id'];
            console.log("contractor Id", this.contractorId)
        })

        this.afs.collection('mycolection').doc(this.myId).ref.get().then(result => {
            if (result.exists) {
                this.selectedC.push(result.data());
                console.log('this is some location', result.data())
            }
        }).then(() => {
            // console.log("contractor data", this.selectedContractor[0].location);
            let myLocation = this.selectedContractor[0].location;
            console.log('My location', myLocation)
            let res = {
                coords: {
                    latitude: myLocation._lat,
                    longitude: myLocation._long
                }
            }
            this.codeLatLng(res.coords);
        }).catch(error => {
            console.log(error.message)
        })
    }    
    codeLatLng(coords) {
        return this.mapsAPILoader.load().then(() => {
            let latlng = new google.maps.LatLng({ lat: coords.latitude, lng: coords.longitude });
            new google.maps.Geocoder().geocode({ 'location': latlng }, function (results, status) {
                console.log(status);
                if (status === 'OK') {
                    console.log(results[0].formatted_address);
                    this.address = results[0].formatted_address;

                    this.console.log(this.address);
                }
            })
        })
    }

Мой вид, который возвращает null

<span>{{address | async}}</span>

Как можноЯ заставляю это работать?

1 Ответ

0 голосов
/ 11 июня 2018

Ваш код предполагает, что ваш адрес является отформатированной строкой, поэтому this.address будет иметь отформатированную строку, когда вы сделаете: 

this.address = results[0].formatted_address;

Чтобы отобразить то же самое, вам не понадобится async pipe, вам просто нужно сделать: 

<span>{{address}}</span>

async необходим канал, когда вы используете Observable и хотите использовать его непосредственно в шаблоне.

Также вы не можете использоватьВызовите функцию обратного вызова и ожидайте значение this в качестве родительского класса, оно изменится на стек вызовов функции обратного вызова.Используйте жирную стрелку (results, status) => {...} вместо обычной function(){}, чтобы сохранить значение this. 

    return this.mapsAPILoader.load().then(() => {
        let latlng = new google.maps.LatLng({ lat: coords.latitude, lng: coords.longitude });
        new google.maps.Geocoder().geocode({ 'location': latlng }, (results, status) => {
            console.log(status);
            if (status === 'OK') {
                console.log(results[0].formatted_address);
                this.address = results[0].formatted_address;

                this.console.log(this.address);
            }
        })
    })
...