Bootstrap 4 工具包在 angular ngFor 中无法正常工作

Question

我对 ngFor 中的 bootstrap 工具包有一个奇怪的问题。悬停时，需要一些时间才能显示工具包标题，并且 CSS 未被应用。请找到相同的屏幕截图。如果在 ngFor 之外使用该工具包，它也能正常工作。正常工作。

这是我的代码 .ts

ngOnInit(): void {
    jQuery(function() {
      (jQuery('[data-toggle="tooltip"]') as any).tooltip();
    });
    this.getGroupsForBox();
  }

  async getGroupsForBox() {
    this.groups = await this.boxManagementService.findGroupsOfBox(this.hub.id);
}

.html

            <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>

Answer 1

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

你怎么能做到这一点，你只需要确保在 *ngFor 完成列表中所有项目的渲染后执行 jQuery 方法。只有你应该这样做。

code.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);
}

Bootstrap 4 工具包在 angular ngFor 中无法正常工作

Bootstrap 4 toolkit not working properly inside angular ngFor

css

bootstrap-4

angular

angular5