イメージのリストは、私はマウスだけがされている画像のみを変更したい作成したことにより、ループがどのように私は角2でホバー上の画像ソースを変更し、クリックすることができ、そのリストには、ここでngFor

Question

によって

<div *ngFor=let item of item > 
     <img src="./assets/img/thumb-up.png"/> 
    </div> 

を生成していますホーブ私は<img [src]="source" on-mouseover="changeimage()"/>試してみましたが、想像して変更するには、この

Answer 1

使用ディレクティブのためのソリューションをいただきましたので、リスト全体像を変更

https://plnkr.co/edit/e3JzzgZmNxYHQITnGMj6

@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}` 
    } 
    } 

Answer 2

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

over:boolean[]; 

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