[英]Bootstrap 4 toolkit not working properly inside angular ngFor
I am having a strange issue with the bootstrap toolkit inside ngFor.我对 ngFor 中的引导工具包有一个奇怪的问题。 On hover, it is taking some time to display the toolkit title and CSS is not getting applied.
在 hover 上,显示工具包标题需要一些时间,并且 CSS 未得到应用。 Please find the screenshot for the same.
请找到相同的屏幕截图。 And if the toolkit is used outside ngFor, it works fine.
如果该工具包在 ngFor 之外使用,它可以正常工作。 It works normally.
它工作正常。
Here is my code.ts这是我的代码.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 .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> </span>
</div>
*ngFor
is structural directive, it creates html DOM on the fly when get the data. *ngFor
是结构指令,它在获取数据时动态创建 html DOM。 That's how it work, ideally you should get ride of jQuery
and use the angular bootstrap library.这就是它的工作原理,理想情况下,您应该使用
jQuery
并使用 angular 引导库。
How ever you can achieve that, you just need to make sure to execute jQuery
method after that *ngFor
completed the rendering off all the items in the list.无论您如何实现,您只需要确保在
*ngFor
完成列表中所有项目的渲染之后执行jQuery
方法。 Than only you should do that.不仅仅是你应该这样做。
code.ts代码.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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.