なぜ、この配列の要素はconsole.log呼び出しの間で変わるのですか？

Question

私は、データを返すサービスを介してAPIを呼び出すanuglarJSコントローラを持っています。問題は、返されるデータを使用するディレクティブでデータが更新されないことがあることです。

しかし、これを掘り下げた結果、いくつかの非常に奇妙な動作が観察されました。私は何が起こっていたのかをデバッグするためにいくつかのコンソールログを追加し、アレイのプロパティの項目数がコンソールコールから次のコンソールコールに変化していることを発見しました。次のように

コントローラコード：

init(){ 
     this.ftService.getSitePromise(true).then((result: ng.IHttpPromiseCallbackArg<Site>) => { 
     let ctrl = this; 
     ctrl.isLoadingItems = true; 
     ctrl.hideSplash = true; 
     ctrl.siteReady = true; 
     ctrl.curSite = result.data; 
     ctrl.curSite.Items = []; 
     console.log("end of header site call"); 
     ctrl.$timeout(function() { 
     console.log(ctrl.curSite.Items); 
     console.log("start get site items first call") 
     ctrl.ftService.getSitePromise(false).then((result: ng.IHttpPromiseCallbackArg<Site>) => { 
      console.log("return first call result.data.Items: " + result.data.Items.length); 
      ctrl.curSite.Items = result.data.Items; 
      ctrl.isLoadingItems = false; 
      console.log("return first call ctrl.curSite.Items: " + ctrl.curSite.Items.length); 
      console.log(ctrl); 
      console.log(ctrl.curSite); 
      console.log(ctrl.curSite.Items); 
     }); 
     }, 200); 
    }); 
} 

次のように予想されるようにデータが表示されていない、このコードの実行、コンソールからである。

任意の洞察これがどのように起こっているか、そして/または私がそれをどのように訂正するかもしれないかについては、非常に感謝しています。

Answer 1

編集：私は投稿する前にコメントを読まなかった。私はあなたの問題が解決されたのを見ていませんでした。うまくいけば、これは将来他の誰かを助けるかもしれませんか？

なぜこのアレイの要素がconsole.logコール間で変更されますか？深くネストされたプロパティは、あなたは彼らが浅い財産である場合、オブジェクトを展開したりするために小さな矢印をクリックすると、コンソールにのみ、それらをつかむことを意味いい加減にアクセスされるため

オブジェクトがconsole.log呼び出しで変更することができます。あなたがないObject.assign({}, myObj)（深くオブジェクトのクローンを作成する必要があるかもしれませんが

あなたはObject.assignを使用してオブジェクトをクローニングすることにより、この動作を変更することができます。

stackoverflowのスニペットコンソールが正しい結果を表示しません。開きますクロムのdevのツールは、実際の結果を確認してください。

// OPEN THE DEVELOPER TOOLS CONSOLE 
 

 
let myObj = { 
 
    shallowProp: 'some value', 
 
    arr: ['initial value'] 
 
}; 
 

 
// notice that when this logs, it seems like the change to myObj happens before the log but it does not 
 
console.log(
 
    'myObj initial log', 
 
    myObj 
 
); 
 

 
// using `Object.assign` clones the object so that when expanded in the console, the value is the initial value 
 
console.log(
 
    'myObj initial log with Object.assign', 
 
    Object.assign({}, myObj) 
 
); 
 

 
// when the value is actually changed 
 
myObj.arr = ['new value']; 
 

 
// the final state 
 
console.log('myObj after change', myObj);

結論：コンソールにログを記録する前に、オブジェクトの複製を試みてください。