为不同的图像分配不同的工具提示

时间:2018-11-26 07:15:50

标签: angular angular-material

我有图像(狗)的数组,我正在这样显示:

enter image description here

我正尝试使用 tooltip 为不同的狗分配不同的名称。 dog1:tooltip(dog1),dog2:tooltip(dog2)...等等……。在我的示例中,每个工具提示都针对与图像中相同的狗显示。我所缺少的:

Stackblitz DEMO

2 个答案:

答案 0 :(得分:2)

使用索引,您可以获得特定的工具提示文本。

<div class="container" *ngFor="let dog of dogs">

            <div class="section">
                <p id="name">Dogs:</p>
                <img  matTooltip="{{dog.tooltip[i]}}"  *ngFor="let image of dog.img; let i = index;" class="dog-img"  src="{{image }}" >
            </div>


    </div>

答案 1 :(得分:1)

如下更新您的代码:

<div class="container" *ngFor="let dog of dogs">

            <div class="section">
                <p id="name">Dogs:</p>
                <span *ngFor="let image of dog.img ; let dataRowIndex = index">
                <img  matTooltip="{{dog.tooltip[dataRowIndex]}}"   class="dog-img"  src="{{image }}" >
            </span>
            </div>


    </div>

Updated stackblitz Demo: