Чтобы назначить разные всплывающие подсказки для разных изображений

Question

У меня есть массив изображений (собак), которые я отображаю так:

Я пытаюсь присвоить разные имена различным собакам, используя tooltip .Средства для dog1: tooltip (dog1), dog2: tooltip (dog2) .... и т. Д. . В моем примере каждая подсказка отображается для той же собаки, что и вобраз.Чего мне не хватает:

Stackblitz DEMO

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>

Answer 2

Обновите код, как показано ниже:

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

Обновлен стек Демо :