如何在Angular中为变量对象动态添加属性

首先你的原始代码存在语法错误，正确的写法应该是定义一个变量来存储对象，比如：

let user = {
  "name": "jacob",
  "age": 22
};

要给这个对象动态添加dob属性（值为数字类型），在Angular里的操作和原生TypeScript/JavaScript一致，有几种常用方式：

• 直接给对象赋值：这是最简单直接的方式，用点语法或者方括号语法都能添加属性：

  // 点语法
  user.dob = 1999;
  // 方括号语法（适合属性名是动态生成的场景）
  user['dob'] = 1999;
  

  只要这个user是组件类的属性，Angular的变更检测会自动把更新同步到视图，模板里绑定{{ user.dob }}就能看到新值。

• 用扩展运算符创建新对象：如果不想修改原对象，而是生成一个包含新属性的新对象（适合需要保持原对象不可变的场景，比如配合响应式状态管理）：

  const updatedUser = { ...user, dob: 1999 };
  

  之后把updatedUser赋值给组件里的属性，就能触发视图更新。

• 结合TypeScript接口规范类型：如果项目用了TypeScript，建议先定义接口约束对象结构，避免类型错误：

  interface User {
    name: string;
    age: number;
    dob?: number; // 用?标记为可选属性
  }
  
  let user: User = { name: "jacob", age: 22 };
  user.dob = 1999; // TypeScript会自动检查，确保dob是数字类型
  

内容的提问来源于stack exchange，提问作者Muhammad Amir