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>

下面是我的完整代码：


    import angular from 'angular';
      var myMod = angular.module('plunker', []).controller('MainCtrl', function($scope) {
        $scope.DataSource=[1,3,4,5,6,7];
    });`

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

        function onInit() {
          vm.data  = vm.cDataSource;
          vm.cDataSource = [1,3,4,5,6,7,8,9,10];
          console.log(vm); 
        }
      },
      controllerAs: 'vm',
      template:`
         {{ vm.cDataSource | json }} 

         {{ vm.data | json }}
      `
    });

AngularJS中的双向数组绑定获取一个空集

1 个答案: