Angular中target.getAttribute()判空不进入else分支问题排查

问题原因 #

1. 你获取到的target.getAttribute("timingId")不是Null类型的null，而是字符串类型的"null"。DOM规范中getAttribute方法仅当目标属性完全不存在时才会返回Null类型的空值，只要属性存在，无论值写的是什么都会返回字符串类型，因此值为null的属性会被读取为字符串"null"。
2. 你最初的判断条件target.getAttribute("timingId") != null只能过滤Null类型的空值，字符串"null"属于合法非空值，因此条件成立进入if分支，将字符串"null"赋值给this.timingId，和字符串拼接打印时会显示为null，和Null类型空值的打印表现一致，造成误判。
3. 你后续修改的判断逻辑存在逻辑错误：!= null || != "null"属于永真条件。如果值为字符串"null"，则!= null条件成立；如果值为Null类型null，则!= "null"条件成立，因此永远无法进入else分支，修改不生效。

解决方案 #

建议先把取值结果存入临时变量，避免重复调用getAttribute造成不必要的性能开销，再修正判断逻辑：

// 先取值存为变量
const rawTimingId = target.getAttribute("timingId");
// 同时排除Null类型空值和字符串"null"，必要时可额外排除空字符串""
if (rawTimingId != null && rawTimingId !== "null") {
  console.log("INSIDE ORI SET");
  this.timingId = rawTimingId;
} else {
  console.log("INSIDE INDEX SET");
  this.timingId = target.getAttribute("index");
}
console.log("HAHAHAHAHAHAH " + this.timingId);

如果追求更简洁的写法，可以用三元表达式简化：

const rawTimingId = target.getAttribute("timingId");
this.timingId = (rawTimingId != null && rawTimingId !== "null") ? rawTimingId : target.getAttribute("index");

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