如何解决Node上执行removeChild失败的DOMException错误？

你遇到的这个DOM错误我之前在做ng-bootstrap项目时也碰到过，咱们先拆解问题根源，再给出正确的解决思路：

错误的核心原因 #

你触发的Failed to execute 'removeChild' on 'Node'错误，本质是两个问题叠加导致的：

1. getElementsByClassName返回的是动态HTMLCollection——当你第一次执行replaceWith修改DOM后，这个集合的元素引用和长度会自动更新，后续循环操作的已经是失效的节点，自然会报错。
2. 在Angular中直接操作原生DOM本身就违背了框架的设计逻辑——Angular是数据驱动视图的，手动修改DOM会绕过它的变更检测机制，很容易和组件库（比如ng-bootstrap）的内部DOM操作冲突，引发各种奇怪的问题。

正确的解决方式：用Angular模板语法替代原生DOM操作 #

既然已经用到了ngbTypeahead的自定义resultTemplate，完全可以通过Angular的模板能力实现需求，根本不需要手动去替换DOM：

方案1：直接在模板中渲染目标元素

如果你的需求就是把结果显示为<b>stack</b>，直接在模板里写死元素即可：

<input [resultTemplate]="rt" [ngbTypeahead]="search">
<ng-template #rt let-r="result" let-t="term">
  <!-- 直接用<b>标签包裹内容，省去后续DOM替换步骤 -->
  <b>stack</b>
</ng-template>

方案2：根据动态逻辑切换元素/样式

如果需要根据条件动态调整元素类型或样式，用*ngIf或ngSwitch实现：

<input [resultTemplate]="rt" [ngbTypeahead]="search">
<ng-template #rt let-r="result" let-t="term">
  <ng-container *ngIf="shouldUseBold(); else regularContent">
    <b>{{ getDisplayText(r, t) }}</b>
  </ng-container>
  <ng-template #regularContent>
    <span class="dropdown-heading">{{ getDisplayText(r, t) }}</span>
  </ng-template>
</ng-template>

对应的组件代码（补全Angular组件的必要结构）：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
  // 实现ngbTypeahead必需的search方法（你之前的代码缺失了这个）
  search = (text$: Observable<string>) => 
    text$.pipe(
      debounceTime(200),
      map(term => term.length < 2 ? [] : ['stack', 'overflow', 'angular'].filter(v => v.toLowerCase().includes(term.toLowerCase())))
    );

  shouldUseBold(): boolean {
    // 这里写你的判断逻辑，比如根据输入的term或结果内容返回布尔值
    return true;
  }

  getDisplayText(result: string, term: string): string {
    // 可以根据result和term动态生成显示内容
    return result;
  }
}

总结 #

在Angular生态里，永远优先用数据绑定和模板语法来控制视图，避免直接操作原生DOM——尤其是使用像ng-bootstrap这类封装好的组件库时，手动修改DOM很容易破坏组件内部的DOM结构和生命周期，引发难以排查的错误。

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