Angular 4中TypeScript模型转JSON时移除空值属性的方法

这有几个实用的方案可以解决你遇到的问题，根据你的使用场景选就行：

方案1：给Person类添加自定义toJSON方法（推荐，一劳永逸） #

直接在你的Person类里实现toJSON方法，这样当你调用JSON.stringify()转模型的时候，会自动调用这个方法帮你过滤掉空值（null或undefined）属性：

export class Person {
  fname: string;
  lname?: string;

  // 自定义JSON序列化逻辑
  toJSON() {
    // 遍历实例的所有属性，只保留非空的
    return Object.fromEntries(
      Object.entries(this).filter(([_, value]) => value != null)
    );
  }
}

之后不管你在哪个地方转Person实例的JSON，都会自动处理：

// 填充模型
let model = new Person();
model.fname = people.get('firstname').value;
model.lname = people.get('lastname').value; // 如果没输入就是null

// 转JSON，自动去掉lname:null
const jsonStr = JSON.stringify(model);
// 结果：{"fname":"xyz"}（当lname为null时）

这个方法的好处是一劳永逸，所有Person实例都能自动生效，不用重复写过滤逻辑。

方案2：手动过滤对象属性（临时处理） #

如果你不想修改Person类，也可以在转JSON之前手动创建一个“干净”的对象：

// 填充模型
let model = new Person();
model.fname = people.get('firstname').value;
model.lname = people.get('lastname').value;

// 手动过滤空值属性
const cleanPerson = Object.fromEntries(
  Object.entries(model).filter(([key, value]) => value != null)
);

// 转JSON
const jsonStr = JSON.stringify(cleanPerson);

这个适合只需要临时处理某一个对象的场景，不用改动类的定义。

方案3：填充模型时就过滤空值（从源头避免） #

在给Person实例赋值的时候，就只给有值的属性赋值，避免lname被设为null：

// 获取表单值
const peopleValue = people.value;

// 只给有值的属性赋值
const modelData = {
  fname: peopleValue.firstname,
  // 只有当lastname不为null/undefined时才添加这个属性
  ...(peopleValue.lastname != null && { lname: peopleValue.lastname })
};

let model = new Person(modelData);

// 转JSON时，没值的lname根本不存在，自然不会出现在结果里
const jsonStr = JSON.stringify(model);

这个方法从源头避免了模型里出现空值的可选属性，后续转JSON就不用额外处理了。

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