Javascript 如何更改悬停时的图像源并在ngFor生成的列表中单击Angular 2

这是创建图像列表的循环。我只想更改鼠标所在的唯一图像。我尝试了

，但它更改了整个列表图像。因此，该使用指令更改为图片的解决方案是什么

@指令（{选择器：'[changePic]}）
出口类别更改{
退订；
构造函数（私有el:ElementRef，私有呈现器：Renderer2）{
this.unsubscribe=this.renderer.listen（this.el.nativeElement，“mouseenter”，事件=>{
this.el.nativeElement.src=https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463-632x474.jpg';
});
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
项目=[1,2,3]；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
}

与Angular 11和Angular 12的新版本一样，您不能像下面这样直接在模板中更改变量：

over:boolean[];

constructor() {
  this.items = ...
  this.over = new Array(this.items.length);
  this.over.fill(false);
}

---

什么不起作用？请解释一下。我的plnkr工作吗？

 @Directive({selector: '[changePic]'})
  export class ChangePic {
    unsubscribe;

    constructor(private el:ElementRef, private renderer: Renderer2){
     this.unsubscribe = this.renderer.listen(this.el.nativeElement, "mouseenter", event => {
        this.el.nativeElement.src = 'https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463-632x474.jpg';
      });
    }
  }

  @Component({
    selector: 'my-app',
    template: `
       <div *ngFor="let item of items" >
        <img  width="100px" changePic src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx"/>
      </div>
    `,
  })
  export class App {
    items = [1,2,3];

    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  }

<div *ngFor="let item of items; let i=index" >
  <img  [src]="over[i] ? './assets/img/thumb-up.png' : './assets/img/other.png'" 
        (mouseover)="over[i] = true"
        (mouseout)="over[i] = false">
</div>

over:boolean[];

constructor() {
  this.items = ...
  this.over = new Array(this.items.length);
  this.over.fill(false);
}

<div *ngFor="let item of items; let i=false" >
  <img  [src]="i ? './assets/img/thumb-up.png' : './assets/img/other.png'" 
        (mouseover)="i = true"
        (mouseout)="i = false">
</div>

<div *ngFor="let item of items; let i=index" >
  <img  [src]="over[i] ? './assets/img/thumb-up.png' : './assets/img/other.png'" 
        (mouseover)="over[i] = true"
        (mouseout)="over[i] = false">
</div>

over: [];
this.over = new Array(this.items.length);
this.over.fill(false);