Angular TypeScript：通过Switch处理JSON值并在视图展示的问题

看起来你需要确保SubsystemFailure的每个属性在对应的appName未出现在failures数组中时，默认值为0。我来帮你优化这段代码，同时修复原代码里的小问题：

首先，假设你的SubsystemFailure接口是这样的（如果不是可以调整）：

interface SubsystemFailure {
  a: number;
  b: number;
  c: number;
  // 其他需要的属性...
}

方案1：初始化默认值 + 修正switch遍历 #

先给subsystemFailure的所有属性设置初始值0，再遍历failures覆盖存在的值：

this.failures = obj.failures;
// 初始化所有属性为0，确保缺失时默认是0
this.subsystemFailure = {
  a: 0,
  b: 0,
  c: 0
  // 其他属性也按这个方式初始化
} as SubsystemFailure;

// 遍历failures数组，注意原代码里的错误：应该取当前项的appFailures，不是整个failures的
this.failures.forEach(failure => {
  switch(failure.appName) {
    case "a":
      // 额外保险：如果appFailures是null/undefined，转成0
      this.subsystemFailure.a = Number(failure.appFailures) || 0;
      break;
    case "b":
      this.subsystemFailure.b = Number(failure.appFailures) || 0;
      break;
    case "c":
      this.subsystemFailure.c = Number(failure.appFailures) || 0;
      break;
    // 其他case继续补充...
  }
});

方案2：更简洁的对象映射（适合属性较多的情况） #

如果你的SubsystemFailure属性很多，写一堆switch会很繁琐，可以用对象键名直接映射：

this.failures = obj.failures;
// 用属性列表初始化所有值为0
const failureKeys: Array<keyof SubsystemFailure> = ["a", "b", "c"];
this.subsystemFailure = Object.fromEntries(
  failureKeys.map(key => [key, 0])
) as SubsystemFailure;

// 遍历赋值，自动匹配键名
this.failures.forEach(failure => {
  const key = failure.appName as keyof SubsystemFailure;
  // 确保键名是SubsystemFailure的有效属性，避免错误
  if (failureKeys.includes(key)) {
    this.subsystemFailure[key] = Number(failure.appFailures) || 0;
  }
});

关键要点说明 #

1. 初始化默认值：这是核心，先把所有属性设为0，就算对应的appName没出现在failures里，属性也不会是undefined。
2. 修复原代码错误：原代码里this.failures.appFailures是错的，应该取当前循环项failure.appFailures。
3. 类型安全处理：用Number()转换+|| 0，确保即使appFailures是字符串、null或undefined，最终都会得到数字0。
4. 简洁性优化：方案2避免了重复的switch case，维护起来更方便，尤其是属性多的时候。

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