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

Question

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

}

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