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

【问题标题】：Tooltip not working inside a tag with ngFor attribute工具提示在具有 ngFor 属性的标记内不起作用
【发布时间】：2018-03-23 05:23:12
【问题描述】：

有人可以向我解释为什么使用 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 函数返回的类型。在上面的代码中，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"}];
}

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

【问题讨论】：

标签： html angular typescript angular2-template

【解决方案1】：

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

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

当工具提示在第一种情况下被触发时，它会启动一个角度检测周期，然后再次调用 items() 并尝试再次显示工具提示并开始另一个角度检测周期，它会一直持续下去反复打开。

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

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

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

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

【讨论】：

【解决方案2】：

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

然后通过正文定位工具提示 $('body').tooltip({selector: '[data-toggle="tooltip"]'});

【讨论】：