angularjs 1.5 组件数据绑定到数组答案

【问题标题】：angularjs 1.5 component databinding to arrayangularjs 1.5 组件数据绑定到数组
【发布时间】：2016-12-12 01:24:02
【问题描述】：

我无法弄清楚将数组绑定到表的数据绑定语法。我有一个父 TodoComponent，它将一个 todoList 传递给一个子组件 TodoListComponent。子组件（TodoListComponent）正在正确接收数据，但没有绑定到模板。

父组件

const TodoComponent = {
    bindings: {
        todos: '<'
    },
    template: `
        <div class="todo">
            <table>
                <tbody>
                    <todo-list todos="$ctrl.todos"></todo-list>
                </tbody>
            </table>
        </div>
    `
};

子组件

const TodoListComponent = {
    bindings: {
        todos: '<',
    },
    template: `
        <tr ng-repeat="todo in $ctrl.todos">
            <td>{{ todo.text }}</td>
        </tr>
    `
};

如果我只是打印出 json，它会显示数据，所以我知道数据已返回

template: `
    <pre>{{$ctrl.todos|json}}</pre>
  `

【问题讨论】：

你的第一个模板应该像<todo-list todos="$ctrl.todoData"></todo-list>一样通过$ctrl.todoData
@PankajParkar 我刚刚编辑了问题以显示我的控制器。如您所见，我正在从 todoData 设置 todos。正如我提到的，数据正在传递给子组件。它的数据绑定不起作用。
this.todos 在 $onChanges 函数中不是控制器的this.todos
正如我已经提到的，我在子组件中获取数据 $ctrl.todos 并且可以在那里打印出数据。它的数据绑定不起作用。我的问题是关于数据绑定语法的。
抱歉，您能创建一个 plunkr/fiddle 吗？

标签： angularjs data-binding angular-components

【解决方案1】：

我有类似的问题，并通过双向数据绑定“=”解决。

你试过用吗？

...
     bindings: {
            todos: '='
        }
...

【讨论】：

抱歉，我看不到与该问题的相关性。为什么我需要双向绑定？

【解决方案2】：

看起来我不能只为带有父模板中表格的表格行创建一个子模板。当我将整个表格移动到子模板时，它起作用了。如果其他人可以发布替代方案，我将很高兴接受它作为有效答案。

【讨论】：