TypeScript模型新增字段ShowRateInverted不显示问题求助

刚看了你的代码，新增的ShowRateInverted字段没法正常显示，大概率是下面几个常见原因导致的，咱们一步步排查解决：

1. 先确认JSON数据源里有没有这个字段 #

你的fillFromJSON方法是直接把JSON对象的属性赋值给类实例的，如果后端返回的JSON里根本没有ShowRateInverted这个键，那这个字段肯定是空的，自然显示不出来。

你可以在调用fillFromJSON之前先打个日志看看：

const rawJson = // 后端返回的JSON数据
console.log('后端返回的JSON:', rawJson); // 检查是否包含ShowRateInverted字段
const trans = new Transaction();
trans.fillFromJSON(rawJson);

2. 检查TypeScript严格初始化的影响 #

如果你的tsconfig.json开了strictPropertyInitialization（严格属性初始化），类里的属性必须在构造函数或者声明时初始化，不然编译可能报错，运行时也可能出现未定义的情况。

给ShowRateInverted加个默认值就行：

export class Transaction extends Serializable {
    public BankAccountNo: number = 0;
    public ResponseID: number = 0;
    public ShowRateInverted: boolean = false; // 加个默认布尔值
    public RetMsg: string = '';
}

或者在构造函数里统一初始化所有属性：

export class Transaction extends Serializable {
    public BankAccountNo: number;
    public ResponseID: number;
    public ShowRateInverted: boolean;
    public RetMsg: string;

    constructor() {
        super();
        this.BankAccountNo = 0;
        this.ResponseID = 0;
        this.ShowRateInverted = false;
        this.RetMsg = '';
    }
}

3. 排查属性名大小写不匹配的问题 #

有时候后端返回的JSON属性名是小驼峰（比如showRateInverted），而你的类里是大驼峰ShowRateInverted，这时候fillFromJSON遍历的时候找不到对应的属性，就没法赋值。

如果是这种情况，要么让后端把属性名改成和类一致的大驼峰，要么修改fillFromJSON方法来处理大小写转换：

fillFromJSON(jsonObj: any) {
    for (let propName in jsonObj) {
        // 把JSON的小驼峰转成类里的大驼峰格式
        const classProp = propName.charAt(0).toUpperCase() + propName.slice(1);
        // 确认类里有这个属性再赋值
        if (this.hasOwnProperty(classProp)) {
            this[classProp] = jsonObj[propName];
        }
    }
}

4. 检查前端显示时的引用是否正确 #

最后别忘了检查你在页面上显示这个字段的地方，有没有拼写错误！比如把ShowRateInverted写成ShowRateInvertd或者其他错误的名字，这种低级错误也很常见。

举个例子，要是用React的话：

// 正确的引用方式
<div>反转汇率显示: {transaction.ShowRateInverted ? '是' : '否'}</div>

按照这几步查下来，应该就能解决问题了。

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