2016-08-05 8 views
0

配列をテーブルにバインドするデータバインディング構文を理解できません。私はtodoListを子コンポーネントTodoListComponentに渡している親のTodoComponentを持っています。子コンポーネント(TodoListComponent)はデータを正しく受信していますが、テンプレートにバインドしていません。angularjs 1.5コンポーネントへのデータバインディング

親コンポーネント

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> 
    ` 
}; 

に私はちょうど私が、データが

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

あなたが最初のテンプレートのような '$ ctrl.todoData'' を渡す必要があり、私はちょうどまた私のコントローラを表示するために質問を編集し@PankajParkar ' –

+0

。ご覧のとおり、私はtodoDataからtodosを設定しています。私が言及したように、データは子コンポーネントに渡されています。そのデータバインディングは動作しません。 – BeesNees

+0

$ onChanges関数内の 'this.todos'はコントローラの' this.todos'ではありません –

答えて

0

を返されたことを知っているので、それはデータを表示するJSONをプリントアウトした場合私は親テンプレートのテーブルを持つテーブル行のための子テンプレートを持つことができないように見えます。テーブル全体を子テンプレートに移動すると、それは機能しました。他の誰かが代替案を投稿できるのであれば、それを有効な回答として受け入れることができてうれしいです。

0

私は同様の問題があり、双方向データバインディング "="で解決しました。

これを試しましたか?

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

申し訳ありません問題の関連性を確認できません。なぜ私は二方向バインドが必要でしょうか? – BeesNees

関連する問題