ngFor属性のタグ内でツールチップが機能しない

Question

誰かが、Angular 4テンプレートを使用してこのコードのツールチップが機能しない理由を説明できますか？私はそれが正常に動作します<em>タグ内*ngForを削除した場合

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

（明らかにただ一つの要素を示します）。私はAngularにはかなり新しいので、おそらくここで実際にどのように動作するのか理解できていないでしょう。私は問題を発見

EDITは、活字体関数から返される型から来ています。上のコードでは、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

私は同様の問題を抱えていましたが、これはthisGithub発行の抜粋です。あなたの* ngForのデータを取得する方法が間違っています。

---

テンプレートから関数を呼び出すことは適切な方法ではなく、これがこの推奨が存在する理由の例です。

ツールチップが最初のケースで起動されると、角度検出サイクルが開始され、items（）が再び呼び出され、再度ツールチップが表示され、別の角度検出サイクルが開始され、繰り返し繰り返します。

最初は、パフォーマンスの問題を回避するための推奨事項がありますが、あなたの場合のような他の結果があります。

あなたは）（項目にはconsole.logを入れた場合は関数を呼び出すことは必須である場合は、代わりにパイプを使用し、それは

...何度も何度も呼ばれ続ける表示されます。あなたは、パイプやある種の観察可能なまたは配列を使用した場合

---

だから、あなたのコードでは、その後、あなたのツールチップは動作しますが、現在はそれだけで関数を呼び出し続けます。