Angular binding array und boolesche/string Datentypen

Question

Ich bin ein Anfänger in angular und typescript.

meinen Dienst innerhalb eines Moduls in Typoskript sieht aus wie unten

module MyModule { 
class HelloService { 

    public data:string[] = ["1","2","3"]; 
    public booleanvalue:boolean = false; 
    public stringvalue:string = "hai"; 

    public test() { 
     this.data.push("hai"); 
     this.booleanvalue = true; 
     this.stringvalue = "Hai welcome"; 
    } 

    } 

    angular.module('MyModule', []).service('hexafy', function() { 
     return new HelloService(); 
    }); 
} 

ich die oben kompilieren und fügen Sie unter div Element der erhaltenen JavaScript-Referenz in einer HTML-Datei mit

<div ng-app="myApp" ng-controller="myCtrl"> 
    <br/> 
     <button ng-click="buttonClick()">Click Me! </button> <br> 
    <br/> 
    <label>{{value}}</label><br> 
</div> 

myCtrl nach injecting der service hexafy sieht wie folgt aus

var myApp = angular.module('myApp',['MyModule']); 

myApp.controller('myCtrl', ['$scope' , 'hexafy' , MyController]); 

function MyController($scope, hexafy) 
{ 
    var vm = $scope; 
    vm.thirdpartyfactory = hexafy; 
    vm.value = vm.thirdpartyfactory.stringvalue;// the problem is in this line 
    vm.buttonClick = function(){ 
    vm.thirdpartyfactory.test(); 
} 

Hier ist meine Frage. Wenn ich "Daten" an vm.value binde, ändert es sich beim Klicken auf die Schaltfläche, aber wenn ich booleanvalue oder stringvalue an vm.value binde, wird es nicht aktualisiert.

Was ist der Grund für diese

Answer 1

würde ich sein, weil denken, wenn Sie tun:

var array = [1,2,3]; 
var copy = array ; 
copy.push(4); 
// array : [1,2,3,4] 

sein, weil Sie binden s durch Referenz-bla;

aber wenn Sie das tun

var number = 2; 
var other = number; 
other += 1; 
// number : 2 
// other : 3 

sein, weil Sie other von Wert-number binden;

dieses Problem beheben Sie tun müssen:

<div ng-app="myApp" ng-controller="myCtrl"> 
    <br/> 
    <button ng-click="buttonClick()">Click Me! </button> <br> 
    <br/> 
    <label>{{thirdpartyfactory.stringvalue}}</label><br> 
</div>