工具提示在具有 ngFor 属性的标签内不起作用

Question

有人可以向我解释一下为什么使用 Angular 4 个模板的这段代码中的工具提示不起作用吗？

<template ngFor let-channel [ngForOf]="channels">
  <td>
    <em *ngFor="let color of findBallsColor()" class="fa fa-circle {{ color }}" [tooltip]="id"></em>
  </td>
</template>
<ng-template #id>
  test
</ng-template>

如果我删除 <em> 标签内的 *ngFor 它工作正常（显然只显示一个元素）。我是 Angular 的新手，所以我可能对它在这里的实际工作方式缺乏一些了解。

编辑

我发现问题出在 Typescript 函数的类型 returned 上。在上面的代码中，由 findBallsColor() 编辑的列表 return 实际上是一个包含 4 个字段的对象。当我将它更改为仅 return 一个字符串时，它就起作用了。所以代码看起来类似于：

HTML:

<template ngFor let-channel [ngForOf]="channels">
  <td>
    <em *ngFor="let color of findBallsColor()" class="fa fa-circle {{ status.color }}" [tooltip]="id"></em>
  </td>
</template>
<ng-template #id>
  test
</ng-template>

TS:

findBallsColor():any[] {
  return [{"statut":"ERROR","name":"name","otherField":"value","anotherField":"value"}];
}

有人知道这种行为的原因吗？

Answer 1

我遇到了类似的问题，这里是 this Github 问题的摘录，详细说明了您获取 *ngFor 数据的方式有什么问题。

从模板调用函数不是一个好的做法，这是存在此建议的一个示例。

当工具提示在第一种情况下触发时，它会启动一个 angular 检测循环，然后再次调用 items() 并尝试再次显示工具提示并启动另一个 angular 检测循环，不断重复。

起初，建议的存在是为了避免性能问题，但它会产生其他后果，就像您的情况一样。

如果你把 console.log 放在 items() 中，你会看到它一直被一次又一次地调用...

如果必须调用函数，请改用管道。

因此，在您的代码中，如果您使用管道或某种类型的可观察对象或数组，那么您的工具提示将起作用，但目前它只是不断调用该函数。

Answer 2

这对我有用 - 添加 data-toggle="tooltip" 到 html 标签 - 也就是工具提示。

然后通过主体 $('body').tooltip({selector: '[data-toggle="tooltip"]'});

工具提示在具有 ngFor 属性的标签内不起作用

Tooltip not working inside a tag with ngFor attribute

html

typescript

angular2-template

angular