AngularTypescript数组只在array.push()上添加最后一个元素

html5 • • 问答

我有一个在 ngInit() 中调用的函数，它使用在for 循环中生成的值的类对象填充数组，使用array.push()。

但是，一旦 for 循环完成，所有数组项都是该类的最后添加实例。

类定义

class ABC{
time: number;
id: number;
 }

函数定义

addToArray(){
 let arrayTemp : ABC[]= [];
 let tempClass ={} as ABC;

 for (let i = 0; i < 4; i++) {
 
   tempClass.timei+1;
   tempClass.id=i;

    let val=i;
    arrayTemp.push(tempClass);
    console.log(arrayTemp[val]);   // here class objects displayed correctly
}

   console.log(arrayTemp);  // here all elements are just the last added class object
  
  }
 }

的输出的console.log（arrayTemp [VAL]）

for 循环后 console.log(arrayTemp) 的输出

我不确定为什么会发生这种情况，任何帮助将不胜感激。

回答

当你直接修改 Class 时，就像这里

   tempClass.timei+1;
   tempClass.id=i;

您正在修改现有的类实例。
因为您将这个已经存在的实例添加到数组中，
arrayTemp.push(tempClass);
这意味着您编辑了您在开始时创建的类
let tempClass ={} as ABC;

你真正想做的是为每次迭代创建一个新的类实例，就像这样

addToArray(){
 let arrayTemp : ABC[]= [];

 for (let i = 0; i < 4; i++) {
   // create new instance of class for each iteration
   let tempClass = new ABC();
   tempClass.timei+1;
   tempClass.id=i;

    let val=i;
    arrayTemp.push(tempClass);
    console.log(arrayTemp[val]);   // here class objects displayed correctly
}

   console.log(arrayTemp);  // here all elements are just the last added class object
  
  }
 }

编辑：
不要忘记用new关键字创建你的类！如果你直接进行初始化，因为let tempClass ={} as ABC;你不会得到一个类的实际表示，你只会得到空对象，它看起来只是一个 ABC 类到打字稿。

以上是AngularTypescript数组只在array.push()上添加最后一个元素的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>