0

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

我的父模板：

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

4

1 回答 1

0

你能试着改变吗

<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}}
      `
    });
于 2018-07-05T21:26:16.683 回答