A horrible issue I faced on attribute binding

Ionic Framework ionic-v3
1

A horrible issue I faced on attribute binding
try to print distance and duration value in HTML template but it’s not showing but these value properly print in console
below my code

            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins:[ori],
                destinations: [des],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, (response, status)=>{
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    this.duration= response.rows[0].elements[0].distance.text;
                    this.duration= response.rows[0].elements[0].duration.text;
                    
                    
                    alert(this.distance)
                    alert(this.duration)
                    this.name="hello"

                    
                } else {
                    alert("Unable to find the distance via road.");
                }
            });

.html

<p>Distance:{{distance}}</p>
<p>Duration:{{duration}}</p>

Please help me out
any help would be appreciated
Thanks in advcance

2

First of all, you assign a value two times in this.duration :

this.duration= response.rows[0].elements[0].distance.text;
this.duration= response.rows[0].elements[0].duration.text;

I think you wanna do this :

this.distance = response.rows[0].elements[0].distance.text;
this.duration = response.rows[0].elements[0].duration.text;

Can you also try to print “this.name” just to see if “Hello” gets printed out ?
And do your alerts are showing ?

1 Like