Angular *ngFor渲染数组时如何跳过null/undefined值避免DOM空占行

• 在JS/TS中对数组使用delete操作符时，并不会真正移除数组里的元素项、也不会改变数组的总长度，只会把对应索引位置的标记清空形成稀疏数组空槽。这类空槽在ngFor遍历的时候依然会被识别到，对应的值为undefined，最终会渲染出没有内容的<option>节点，自然就会占用select里的行位。
• 即使后续给模板加判断，数组本身残留的空槽如果不清理，依然会带来不必要的遍历和渲染开销。

1. 从根源修正数组移除逻辑，彻底清空空槽 #

替换原有双重循环+delete的写法，用过滤方法生成全有效项的新数组，从根源上避免空值残留：

// 先把需要排除的角色值整理成Set，匹配效率远高于循环对比
const excludeRoleSet = new Set(this.subAdminData.map(item => item.roles));
// 过滤掉所有匹配的项，直接重新赋值给渲染用的数组，返回的新数组没有任何空槽
this.subAdminAllData = this.subAdminAllData.filter(role => !excludeRoleSet.has(role));

这种写法比嵌套for循环的实现性能更好，代码更简洁，返回的数组长度和有效项完全一致，不会出现任何空值残留。

2. 模板侧加兜底判断，双保险拦截空值渲染 #

哪怕数组里偶发出现null/undefined值，也通过结构判断跳过对应option的渲染，同时修正原有option写死value的问题：

<select class="custom-select" size="5" name="subadminrights" required style="width: 100%;">
  <option selected disabled value="Select admin rights">Select sub administrative rights: </option>
  <!-- 用ng-container分层避免结构型指令同节点的优先级冲突 -->
  <ng-container *ngFor="let saData of subAdminAllData; trackBy: trackOption">
    <option 
      *ngIf="saData"
      [value]="saData"
    >
      {{saData}}
    </option>
  </ng-container>
</select>

注意两个常见坑：

• 原代码里<option value="full">把所有选项的value都固定写死成了"full"，需要改成动态绑定当前遍历值，否则会出现显示内容和实际传值不匹配的问题
• 结构型指令（*ngFor、ngIf）不要同时写在同一个DOM元素上，同节点时Angular会优先执行ngIf，导致数组遍历逻辑异常，用无DOM副作用的<ng-container>做分层包裹是Angular官方推荐的写法

如果需要优化列表渲染性能，可以给ngFor加trackBy函数，避免Angular全量重绘option：

// 组件内新增方法
trackOption(index: number, item: string) {
  return item;
}

3. 保留原有循环逻辑的补救方案 #

如果因为业务原因不想重构原有嵌套循环，可以把delete替换为splice方法，真正从数组结构里移除对应索引的元素，同时循环结束后加兜底过滤：

for(let i = 0; i < this.subAdminData.length; i++) {
  // 倒序遍历待匹配的数组，避免splice移除元素后索引偏移导致漏匹配
  for(let j = this.subAdminAllData.length - 1; j >= 0; j--) {
    if(this.subAdminData[i].roles === this.subAdminAllData[j]) {
      // splice会真正移除指定索引的元素，缩短数组长度，不会留下空槽
      this.subAdminAllData.splice(j, 1);
    }
  }
}
// 兜底清理所有残留的null/undefined值，!=null 可同时匹配null和undefined
this.subAdminAllData = this.subAdminAllData.filter(item => item != null);

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