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>

如果我移除*ngFor标记内的<em>，它就可以正常工作（显然只显示一个元素）。我对Angular很陌生，所以我可能不太了解它在这里是如何运作的。

修改

我发现问题来自于Typescript函数返回的类型。在上面的代码中，findBallsColor()返回的列表实际上是一个包含4个字段的对象。当我改变它只是返回一个字符串它的工作原理。所以代码看起来类似于：

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获取数据的方式有什么问题。

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

当在第一种情况下触发工具提示时，它会启动一个角度检测周期，然后再次调用items（）并尝试再次显示工具提示，它会启动另一个角度检测周期并继续进行反复。

首先，建议存在避免性能问题的建议，但它会产生其他后果，例如您的情况。

如果你把一个console.log放在items（）中，你会看到它一次又一次地被调用......

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

所以，在你的代码中，如果你使用了一个管道或一个observable或某种类型的数组，那么你的工具提示就可以了，但是目前它只是一直在调用这个函数。

Answer 2

这对我有用-将data-toggle =“ tooltip”添加到html标签-aka工具提示。

然后通过正文$（'body'）。tooltip（{selector：'[data-toggle =“ tooltip”]'}））定位工具提示；

工具提示无法在具有ngFor属性的标记内工作

2 个答案: