在两个图标之间来回切换垫子图标时遇到问题

Question

我知道我需要做一个for循环或某种if语句，我已经试着把这些部分组合在一起几个小时了，但没有成功。如有任何帮助，我们将不胜感激。

html

<button  type="button" mat-icon-button mat-mini-fab data-bs-target="#sidebar" 
data-bs-toggle="collapse" (click)="changeIcon('arrow_back')"
color="primary"><mat-icon>{{icon}}</mat-icon></button> <!--arrow_back-->

ts成分

public icon = 'arrow_forward';
public changeIcon(newIcon: string){
this.icon = newIcon;

}

Answer 1

如果你想在这两个图标之间切换，你可以这样做：

<button type="button" mat-icon-button mat-mini-fab data-bs-target="#sidebar" 
data-bs-toggle="collapse" (click)="changeIcon()"
color="primary"><mat-icon>{{icon}}</mat-icon></button> 

public icon = 'arrow_forward';
public changeIcon(): void {
this.icon = this.icon === 'arrow_forward' ? 'arrow_back' : 'arrow_forward';
}

Answer 2

您的代码看起来很好，当您单击它时，它会切换到arrow_back。如果您想在再次单击它时切换回arrow_forward，您可以简单地切换值

<button type="button" mat-icon-button mat-mini-fab data-bs-target="#sidebar" 
data-bs-toggle="collapse" (click)="changeIcon()"
color="primary">
<mat-icon> {{icon}} </mat-icon>
</button> 

icon:string = 'arrow_forward';
public changeIcon(): string {
const temp = this.icon === 'arrow_forward'? 'arrow_back' : 'arrow_forward'
this.icon = temp;
}