傳遞地圖距離ngModel在離子2

這是代碼的一部分：兩兩地之間傳遞地圖距離ngModel在離子2

calculateAndDisplayRoute(directionsService, directionsDisplay) { 

    if((this.origin.query !== '') && (this.destination.query !== '')) { 

    directionsService.route({ 
     origin: this.origin.query, 
     destination: this.destination.query, 
     travelMode: 'DRIVING' 
    }, function(response, status) { 
     if (status === 'OK') { 
     directionsDisplay.setDirections(response);  
     var total = 0; 
     var route = directionsDisplay.getDirections().routes[0]; 

     for (var i = 0; i < route.legs.length; i++) { 
      total += route.legs[i].distance.value; 
     } 

     total = total/1000; 

     this.distance = total << PROBLEM 

     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 

    }); 

    } else { 
    return; 
}

這得到在公里（VAR總）的路由和距離。問題是我不能在這個回調之外使用這個變量。我想將它綁定到ngModel以便進一步手動更改/使用。

我知道，我需要以更新模型中使用ngZone，但我不能通過區回調，一些幫助？^^

<ion-input type="number" (keyup)="onKey($event)" [(ngModel)]="distance"></ion-input>

來源

2017-04-01 AlexARH

問題是不是ngZone可言。事實上，您正在使用一個改變this值的常規功能。所以this.distance內function(response,status)是不同的。嘗試：

(response, status)=> { 
     if (status === 'OK') { 
     directionsDisplay.setDirections(response);  
     var total = 0; 
     var route = directionsDisplay.getDirections().routes[0]; 

     for (var i = 0; i < route.legs.length; i++) { 
      total += route.legs[i].distance.value; 
     } 

     total = total/1000; 

     this.distance = total << PROBLEM 

     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 

    }

箭頭功能Reference

來源

2017-04-01 05:33:03

真實的，但仍然，甚至用箭頭功能，如果我嘗試CONSOLE.LOG（this.distance）回調將與不確定的迴應之外。那是我卡住的地方。 – AlexARH

依賴於'.route'是一個異步函數，在這種情況下，您的console.log外部將在執行箭頭函數之前打印。在模板的情況下，當調用箭頭函數時視圖將得到更新 –

看起來像它的工作，非常感謝..我沒有檢查我所做的每一個變化的觀點，只有控制檯：S再次感謝^^ – AlexARH

傳遞地圖距離ngModel在離子2

回答

相關問題