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

【问题标题】：Angular binding array and boolean/string datatypes角度绑定数组和布尔/字符串数据类型
【发布时间】：2017-11-17 10:31:51
【问题描述】：

我是angular 和typescript 的初学者。

我在 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>

injectingservice hexafy 之后的 myCtrl 如下所示

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

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

这是什么原因

【问题讨论】：

标签： angularjs typescript binding angularjs-scope angular-services

【解决方案1】：

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

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

因为你通过reference将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>

【讨论】：