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

Question

我在构建绑定到我的组件的数组时遇到了一些麻烦。

我的父模板：

<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。

Answer 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。数据源=[1,3,4,5,6,7]; });` myMod.component('customComponent'， { 绑定：{ c数据源："=" }, 控制器：函数 (( { var vm = this; vm.data = []; vm.$onInit = onInit; 函数 onInit(( { vm.data = vm.cDataSource; vm.c数据源 = [1,3,4,5,6,7,8,9,10]; 控制台.log(虚拟机(; } }, 控制器作为："vm"， 模板：'  {{ vm.cDataSource | json }}{
{ vm.data | json }} ` });