角度绑定数组和布尔/字符串数据类型

Posted 2021-05-03

我是angular和typescript的初学者。

打字稿中的模块内部服务如下所示

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();
    });
}

我编译上面的代码并将获得的javascript引用添加到带有div元素的html文件中

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

injecting之后的myCtrl service hexafy如下所示

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();
}

这是我的问题。如果我将“data”绑定到vm.value，它会在按钮单击时更改，但如果我将booleanvalue或stringvalue绑定到vm.value，则它不会更新。

这是什么原因

答案

我认为这是因为当你这样做时：

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

因为你通过引用s绑定bla;

但是当你这样做的时候

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

因为你将other的值绑定到number;

要修复此问题，您需要执行以下操作：

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