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

Question

我有一系列图像（狗），我显示如下：

我正在尝试使用工具提示为不同的狗分配不同的名称。对于dog1 的含义：工具提示（dog1），dog2：工具提示（dog2）......等等。在我的示例中，每个工具提示都显示为与图像中相同的狗。我错过了什么：

Stackblitz演示

标签： angularangular-material

Answer 1

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

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