单击带有点击功能的按钮时更改图像角度

时间:2018-07-24 15:12:02

标签: angular image binding click

我试图在单击按钮时使用Angular更改图像。我已经在页面上具有功能更改文本,但是无法弄清楚如何更改图像。每个功能将具有与之关联的不同图像。我已经尝试过this.imgsrc在功能上的一些变化,但似乎没有任何作用。编辑:单击按钮时,我试图在两个不同的位置显示消息和图像。来自下面代码的消息显示在顶部,而我想要显示的图像将显示在右侧。

 <div>{{clickMessage}}</div>

 <button (click)="onclick1()" class="button">1</button>
 <button (click)="onclick2()" class="button">2</button>
 <button (click)="onclick3()" class="button">3</button>
 <button (click)="onclick4()" class="button">4</button>
 <button (click)="onclick5()"class="button">5</button>

组件代码

export class ChangeStratComponent implements OnInit {
clickMessage = '';
constructor() { }
ngOnInit() {
}
onclick1() {
this.clickMessage = 'click 1';
}
onclick2(){
this.clickMessage = 'Click 2';
}
onclick3() {
this.clickMessage = 'Click 3';
}
onclick4() {
this.clickMessage = 'Click 4';
}
onclick5() {
this.clickMessage = 'Click 5';
}

}

1 个答案:

答案 0 :(得分:-1)

这对https://stackblitz.com/edit/angular-scm9cy有帮助。 我使用“ * ngFor”重构了一些可重复的代码。  组件:

export class ChangeStratComponent {
  imageSrc = '';
  messageText = '';

  imageButtons = [ {src:'photo-src', name: 'image-1'}, 
   {src:'photo-src', name: 'image-2'}, 
   {src:'photo-src', name: 'image-3'}]

constructor() { }

onClick(imageNameObject) {
 this.imageSrc = imageNameObject.src;
 this.messageText = imageNameObject.name;

}

HTML:

<img src="{{imageSrc}}"> <div>{{messageText}}</div> <button *ngFor="let imageButton of imageButtons; let i = index" (click)="onClick(imageButton)" class="button">{{i}}</button>