我试图在单击按钮时使用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';
}
}
答案 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>