Css Bootstrap 4 toolkit在的内部工作不正常

我对ngFor中的引导工具包有一个奇怪的问题。在悬停状态下，显示工具箱标题需要一些时间，CSS没有得到应用。请找到相同的屏幕截图。如果工具包是在ngFor之外使用的，那么它可以正常工作。它工作正常

这是我的密码 .ts

.html

{{group.GroupName}

*ngFor

是结构化指令，它在获取数据时动态创建html DOM。这就是它的工作原理，理想情况下，您应该使用

jQuery

并使用angular bootstrap库

无论怎样，只要确保在

*ngFor

完成列表中所有项目的渲染后执行

jQuery

方法即可。而不仅仅是你应该这么做

代码.ts

ngOnInit(): void {
// right now in ngOnInit, nothing is there in the DOM it doesn't applied to that
// Remove this from here.
// jQuery(function() {
  // (jQuery('[data-toggle="tooltip"]') as any).tooltip();
// });
this.getGroupsForBox();
  }
async getGroupsForBox() {
    this.groups = await this.boxManagementService.findGroupsOfBox(this.hub.id);
    // once you know list are populated in html then do that part
    // getting the data in TS and rendering in html there will be time difference in ms, use small hack of setTimeout not ideal not recommended but it will do the job
    setTimeout(()=>{
      jQuery(function() {
        (jQuery('[data-toggle="tooltip"]') as any).tooltip();
      });
    },500);
}

---

您需要做的第一件事是从angular应用程序中删除所有JQuery代码。您可以使用诸如

ngx bootstrap

之类的软件包来实现这一点，而无需jQuery。我确实尝试过删除jQuery，但是工具提示在ngx之外也无法正常工作。在悬停状态下显示工具提示标题需要时间，CSS无法应用。与上面的截图相同。我必须坚持引导。另一个最接近引导的是ng引导：

            <div *ngFor="let group of groups">
                <span
                  class="badge badge-info"
                  data-toggle="tooltip"
                  data-placement="bottom"
                  title="{{ group.GroupDescription }}"
                  >{{ group.GroupName }}</span
                >
                <span>&nbsp;</span>
            </div>

ngOnInit(): void {
// right now in ngOnInit, nothing is there in the DOM it doesn't applied to that
// Remove this from here.
// jQuery(function() {
  // (jQuery('[data-toggle="tooltip"]') as any).tooltip();
// });
this.getGroupsForBox();
  }
async getGroupsForBox() {
    this.groups = await this.boxManagementService.findGroupsOfBox(this.hub.id);
    // once you know list are populated in html then do that part
    // getting the data in TS and rendering in html there will be time difference in ms, use small hack of setTimeout not ideal not recommended but it will do the job
    setTimeout(()=>{
      jQuery(function() {
        (jQuery('[data-toggle="tooltip"]') as any).tooltip();
      });
    },500);
}