Question

我有一个从角度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>

我该如何使其发挥作用？

Answer 1

您的代码表明您的地址是格式化的字符串，因此this.address会有格式化的字符串：

this.address = results[0].formatted_address;

要显示相同内容，您不需要async管道，只需执行以下操作：

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

当您使用async并希望直接在模板中使用时，需要

Observable管道。

此外，您不能使用回调函数并期望this的值作为父类，它将更改为回调函数call-stack。使用胖箭头函数(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);
            }
        })
    })

刷新角度4的变化视图

1 个答案: