悬停更改图像在 Angular4 中不起作用

Question

我在一个 Angula4 项目中工作，在此我有一个悬停来更改图像部分，我做了类似下面的代码但它不适合我，但是相同的代码在 (visual studio) 中完美工作其他项目。

接下来我应该做什么或者我错过了什么......

product.component.html

<div class="col-5">
      <div class="container" >
        <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="assets/Product_Details/Show1.png">
          <img id="sm005" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="assets/Product_Details/Show2.png">
          <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="assets/Product_Details/Show3.png">
          <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="assets/Product_Details/Show4.png">
          <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="assets/Product_Details/Show5.png">
      </div>
    </div>

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">`</script>
    <script>
      $('img[id^=sm00]').click(function () {
          $('#ProductImage').attr('src', $(this).attr('ref'));
      });
    </script>

Answer 1

您可以执行以下操作：

product.component.html

<div class="col-5">
      <div class="container" >
        <img [src]="imageURL" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/350x150" alt="img1" class="img-thumbnail" ref="https://via.placeholder.com/350x150">
          <img id="sm005" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/351x151" alt="img2" class="img-thumbnail" ref="https://via.placeholder.com/351x151">
          <img id="sm002" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/352x152" alt="img3" class="img-thumbnail" ref="https://via.placeholder.com/352x152">
          <img id="sm003" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/353x153" alt="img4" class="img-thumbnail" ref="https://via.placeholder.com/353x153">
          <img id="sm004" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/354x154" alt="img5" class="img-thumbnail" ref="https://via.placeholder.com/354x154">
      </div>
    </div>

请用您的图片替换占位符图片。

product.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-product',
  templateUrl: './product.component.html',
  styleUrls: [ './product.component.css' ]
})
export class ProductComponent  {
  name = 'Angular 4';
  imageURL:string ;

  constructor(){

  }

  mouseEnter(event){
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.ref;
    var value = idAttr.nodeValue;
    console.log(value)
    this.imageURL = value ; //I have binded thisvariable in HTML
  }

  mouseLeave(ev){
    //reset this.imageURL if needed
  }
}

工作Demo

使用点击事件处理程序更新代码

更新

要显示默认图像，请将您的 .ts 文件更改为：

import { Component } from '@angular/core';

@Component({
  selector: 'my-product',
  templateUrl: './product.component.html',
  styleUrls: [ './product.component.css' ]
})
export class ProductComponent  {
  name = 'Angular 4';
   imageURL:string = "https://via.placeholder.com/500x500"; // change is here

  constructor(){

  }

  mouseEnter(event){
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.ref;
    var value = idAttr.nodeValue;
    console.log(value)
    this.imageURL = value ; //I have binded thisvariable in HTML
  }

  mouseLeave(ev){
    //reset this.imageURL if needed
  }
}

Demo