Angular中ngb-tooltip组件在ngFor循环内不生效问题咨询

• 循环层级绑定错误
  你当前将*ngFor指令绑定在<mat-button-toggle-group>节点上，会为每一个 locker 生成独立的切换组，所有组同时绑定同一个reservelocker.lockerCode变量会引发事件绑定冲突，导致tooltip的鼠标监听事件失效。
  正确写法是将*ngFor移到内部的<mat-button-toggle>节点上，外层仅保留一个切换组：

<mat-button-toggle-group name="lockers" required [(ngModel)]="reservelocker.lockerCode" aria-label="Font Style">
  <mat-button-toggle 
    *ngFor="let loc of availableLockers; trackBy: trackByLockerCode"
    value="{{loc.lockerCode}}" 
    ngbTooltip="Tooltip"
    container="body"
    [ngClass]="{'lk-av' : loc.allocStatus=='un-alloc','lk-tr' : loc.allocStatus=='temp-alloc','lk-re' : loc.allocStatus=='alloc'}"
    [disabled]="loc.allocStatus=='alloc'"
  >
    <i class="fas fa-minus-circle"></i> <em class="locker-no"> {{loc.lockerCode}} </em>
  </mat-button-toggle>
</mat-button-toggle-group>

• 动态元素初始化异常
  如果availableLockers是异步请求返回的数据，ngFor动态生成的DOM节点会晚于ngbTooltip的全局初始化时机，导致指令未正确绑定。可以给ngFor添加trackBy函数优化渲染，确保动态节点能正确识别指令：
  在组件ts文件中添加trackBy方法：

trackByLockerCode(index: number, locker: any): string {
  return locker.lockerCode;
}

• 禁用状态拦截事件
  你给<mat-button-toggle>添加了[disabled]配置，原生禁用状态的元素会拦截所有鼠标事件，导致tooltip无法触发。如果需要在禁用状态也显示tooltip，可以将ngbTooltip绑定到内部未被禁用的子元素（比如<i>或<em>标签）上，同时添加container="body"配置避免父元素样式遮挡。
• 父元素样式限制
  如果父节点设置了overflow: hidden或者z-index层级过低，会导致生成的tooltip被遮挡，看起来未触发。添加container="body"属性可以将tooltip组件插入到全局body节点下，规避父元素的样式限制。

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