AngularJS 中的双向数组绑定得到一个空集答案

【问题标题】：Two way array binding in AngularJS gets an empty setAngularJS 中的双向数组绑定得到一个空集
【发布时间】：2018-12-12 04:55:01
【问题描述】：

我在分配一个绑定到我的组件的数组时遇到了一些麻烦。

我的父模板：

<custom-component c-data-source="vm.dataSource"></custom-component>

vm.dataSource 是一个字符串数组。

我的自定义组件：

.component('customComponent', {
  bindings: {
    cDataSource: '='
  },
  controller: function () {
    var vm = this;
    vm.data = [];
    vm.$onInit = onInit;

    function onInit() {
      vm.data = vm.cDataSource;
      console.log(vm);
    }
  },
  controllerAs: 'vm',
  template: `
     {{ vm.cDataSource | json }}
     {{ vm.data | json }}
  `
}

我的控制台输出

controller {cDataSource: Array(0), ...}
> cDataSource: (4) ['lorem', ...]

还有我渲染的子模板：

['lorem', ...]
[]

似乎当我试图将 vm.cDataSource 分配给 vm.data 时，该集合是空的，但是当它在控制台中打印出 vm 时，它在折叠视图中是空的，但是如果我展开它，它显示元素（在本例中为 4 个）。另外，当我在模板中打印时，直接绑定变量（vm.cDataSource）有元素，但本地变量（vm.data）没有。

我正在使用 AngularJS 1.5.0-rc.2。

【问题讨论】：

这听起来像是一个很容易修复的范围和引用问题。如果您将vm.data 的分配更改为vm.data = angular.copy(vm.cDataSource);，您可能会解决此问题。这将使用vm.cDataSource中的数据副本创建一个新引用
它没有解决它，但你让我知道可能是什么问题。我通过避免组件渲染到数组来解决，该数组已填充到父控制器中。
很高兴我帮助让齿轮运转起来！

标签： angularjs angularjs-components angularjs-bindings

【解决方案1】：

你能不能试着改变一下

<custom-component c-data-source="vm.dataSource"></custom-component> 到 <custom-component c-data-source="dataSource"></custom-component>

下面是我的完整代码：

从“角度”导入角度； var myMod = angular.module('plunker', []).controller('MainCtrl', function($scope) { $scope.DataSource=[1,3,4,5,6,7]; });` myMod.component('customComponent', { 绑定：{ cDataSource：'=' }, 控制器：函数（）{ var vm = 这个； vm.data = []; vm.$onInit = onInit; 函数 onInit() { vm.data = vm.cDataSource; vm.cDataSource = [1,3,4,5,6,7,8,9,10]; 控制台.log(vm); } }, 控制器作为：'vm'，模板：` {{ vm.cDataSource | json }}
{{ 虚拟机数据 | json}} ` });

【讨论】：