AngularJSコンポーネントのバインディングがオブジェクトを渡さない

Question

受信エラーでPollListCtrl.runQueryで未定義のプロパティ 'type'を読み取ることができません。 なぜこれが未定義になるのかわかりません。私はここにオブジェクトがあることを確認するために、listConfigが作成されたconsole-loggeds.controller.jsというコンソールログを記録しました。応答は

{type: "all", filters: {pollsCreated: Array(3)}} 

である。しかし、私は、プロファイル-polls.htmlでコンポーネント・リストにポーリングするためにそれを渡すようにしようとすると、それは未定義にまで来ています。以下は、関連ファイルの要点です。なぜこれが正しく通らないのか誰にでも教えてもらえますか？

https://gist.github.com/RawleJuglal/fa668a60e88b6f7a95b456858cf20597

Answer 1

私はあなたのコンポーネントのウォッチャーを定義する必要があると思います。開始時にlistConfigは定義されておらず、ある遅延（次のダイジェストサイクル）後にのみ値を取得します。そこで、ウォッチャーを作成し、ifのステートメントの後にキャンセルします。あなたのangularjsアプリケーションで$スコープを使用しないでください

app.component('pollList', { 
    bindings: { 
    listConfig: '=' 
    }, 
    templateUrl: 'poll-list.html', 
    controllerAs: 'vm', 
    controller: PollListCtrl 
}); 

function PollListCtrl($scope) { 

    var vm = this; 

    function run(){ 
     console.log(vm.listConfig); 
    } 


    var cancelWatch = $scope.$watch(function() { 
     return vm.listConfig; 
    }, 
    function (newVal, oldVal) { 

     if (newVal !== undefined){ 
      run(); 
      cancelWatch(); 
     } 
    }); 
} 

Demo plunkr

Answer 2

• 。

• ngOnInit（）ライフサイクルフックを使用して、コンストラクタではなくバインディング値にアクセスできます。

  ngOnInit（）{

  $ ctrl.listConfig = {タイプ：[すべて]}。

  $ ctrl.limit = 5;

  }