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

有人能解释一下为什么这段使用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>

TS:

---

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

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

---

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

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

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

如果将console.log放入items（），您将看到它不断被调用

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

---

---

因此，在您的代码中，如果您使用了管道、可观察对象或某种数组，那么您的工具提示会起作用，但目前它只是一直在调用函数。

我也遇到了类似的问题，下面是Github问题的摘录，详细说明了您为*ngFor获取数据的方式有什么问题

---

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

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

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

如果将console.log放入items（），您将看到它不断被调用

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

---

---

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

这对我很有效-将data toggle=“tooltip”添加到html标记-也称为工具提示

---

然后通过body$（'body'）以工具提示为目标

这对我来说很有效-将data toggle=“tooltip”添加到html标记-也称为工具提示

然后通过body$（'body'）以工具提示为目标

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

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