Question

我目前正在尝试显示名称列表及其分配的图像。

因此，我创建了一个包含所有名称及其图像的服务（忽略链接）：

import { Case } from './case';

export const CASES: Case[] = [
  { name: 'Diesel', image: '/assets/images/diesel.png', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', link: '' }
];

此案例列表是在case-list component.ts中获取的：

import {Component, OnInit} from '@angular/core';
import { CASES } from '../mock/mock-cases';

@Component({
  selector: 'app-case-list',
  templateUrl: './case-list.component.html',
  styleUrls: ['./case-list.component.scss']
})
export class CaseListComponent implements OnInit {

  cases = CASES;

  ...

}

在案例列表的html文件中，我正在遍历此数组以显示名称及其图像：

<div *ngFor="let case of cases" class="container-fluid d-flex justify-content-center">

  <ul>
    <li class="text-center">
      {{ case.name }}
    </li>
  </ul>

  <img src="{{ case.image }}" alt="First" class="position-absolute align-self-center d-none">

</div>

它可以工作，但我希望它的功能有所不同。当前正在显示所有图像。

但是，我希望在悬停相关的li项时仅显示图像。另外，仅分配给li项的图像（已悬停））应显示-fe如果li悬停在Savum上，则仅显示其图像savum.png。

如何在Angular中实现这种行为？

Answer 1

为mouseenter和mouseleave提供两个功能，以便我们将鼠标悬停在特定列表项上时可以设置图像url。 mouseenter函数，用于通过传递特定参数的网址作为参数并将其存储到公共属性imageUrl中。

.ts文件应该是这样的。

    export class CaseListComponent implements OnInit {

      cases = CASES;

      imageUrl: string;

      mouseEnter(url: string) {
        this.imageUrl = url;
      }

      mouseLeave() {
        this.imageUrl = null;
      }

    }

// And then use that value to update the src attribute of the image tag and make a note only it contains a string it will be displayed and i am not going to do the validation because its not important in this case.

.html就是这样

<div class="container-fluid d-flex justify-content-center">

  <ul>
    <li (mouseenter)="mouseEnter(case.image)" (mouseleave)="mouseLeave()" class="text-center" *ngFor="let case of cases">
      {{ case.name }}
    </li>
  </ul>

  <img *ngIf="!!imageUrl" [src]="imageUrl" class="position-absolute align-self-center">

</div>

Answer 2

我的解决方案：

根据每个css class和li的索引将img分配给它们。默认情况下，每个图像都是隐藏的。

在每个mouseenter and mouseleave上注册li事件，如下所示：

  <ul>
    <li class="text-center" *ngFor="let case of cases,let i=index" 
        (mouseenter) ="mouseEnter(i) "  
        (mouseleave) ="mouseLeave(i)" >
      {{ case.name }}
    </li>
  </ul>

  <img *ngFor="let case of cases, let i=index" src="{{ case.image }}" alt="First" class="position-absolute align-self-center icon-image" ngClass="imgss{{i}}">
</div>

.icon-image类的CSS：

  .icon-image{
  display: none;
}

将事件捕获到ts文件中。并根据要悬停的元素的索引，更改元素的可见性。

`

mouseEnter(itemIndex){
 console.log('hover over' ,itemIndex);
 const element =  this.elRef.nativeElement.querySelector(`.imgss${itemIndex}`);
 element.style.display ="block";
 console.log('hover over' ,element);

}
mouseLeave(itemIndex){
 const element =  this.elRef.nativeElement.querySelector(`.imgss${itemIndex}`);
  element.style.display ="none";
}

` 工作示例：

Working demo

遍历项目列表，在悬停时显示分配的图像

2 个答案: