Angular for循环使用Interface时push对象全部重复为最后一项问题

JavaScript/TypeScript 中对象属于引用类型，变量存储的是对象在堆内存中的地址，而非对象本身的值。你的代码存在两个核心问题：

1. 循环内写let user = this.user时，并没有创建新的User对象，只是把this.user对应的内存地址赋值给了user变量。后续循环中修改user.id、user.name时，修改的始终是堆内存中那同一个对象，push到userList里的3个元素全是指向这同一个对象的引用，所以最终所有项都会显示最后一次循环赋值的结果。
2. 原代码本身存在基础语法和类型错误：
   • 类型声明错误：user!: User[]声明user是User数组，但你实际初始化的this.user是单个User对象；userList=any使用了隐式any类型，不符合TS规范
   • 循环代码写在了类的方法作用域外，不属于类的方法逻辑，运行会直接报语法错误
   • userList没有初始化空数组，直接调用push会报空指针错误

你可以直接参考下面修正后的组件代码：

import { Component, OnInit } from '@angular/core';
export interface User {
    id: number;
    name: string;
}
@Component({
  selector: 'app-typeof-otcsection',
  templateUrl: './typeof-otcsection.component.html',
  styleUrls: ['./typeof-otcsection.component.css']
})
export class TypeofOTCSectionComponent implements OnInit {
  // 修正类型：如果不需要全局存单个user可以直接删掉这个声明
  user!: User;
  // 明确类型为User数组，初始化为空数组
  userList: User[] = [];
  // 模拟从数据库拿到的数组，实际替换为你的接口返回值
  userarrayfromDB: User[] = [];

  constructor() {}

  ngOnInit(): void {
    // 实际场景中这里是接口请求拿到userarrayfromDB的逻辑，拿到数据后再执行遍历
    this.userarrayfromDB = [
      {id: 0, name: "test"},
      {id: 0, name: "test2"},
      {id: 0, name: "nishit"}
    ]

    let z = 1;
    for (let k = 0; k < this.userarrayfromDB.length; k++) {
      // 关键：每次循环都创建一个全新的User对象，不复用同一个引用
      const newUser: User = {
        id: z,
        name: this.userarrayfromDB[k].name
      }
      this.userList.push(newUser);
      z++;
    }

    // 此时this.userList就是你预期的结构
  }
}

• 每次循环迭代时创建全新的独立User对象，从根源避免多个数组项指向同一个内存地址的问题
• 修正所有错误的TS类型声明，移除不必要的隐式any类型
• 把循环逻辑移到ngOnInit类方法内部，符合Angular类的语法规范
• 初始化userList为空数组，避免push操作报空错误

如果你确实需要复用预先定义的this.user模板对象，也可以在循环时用浅拷贝生成新对象：let user = {...this.user}，再修改属性值push，效果和新建对象一致，但直接在循环内新建对象的写法可读性更强，也更不容易出引用错误。

内容的提问来源于stack exchange，提问作者Nishit bhardwaj