若要更改多个图标onclick在角度6

Question

我正在使用一个简单的<mat-icon>highlight_off</mat-icon>。我想在单击该图标时将其更改为另一个图标。

我该如何使用打字稿？

我也尝试过这个answer，没有结果。

此外，在我更改图标之后，我希望第二次单击将图标更改回原始图标。我该怎么办？

Answer 1

在组件中：

public icon = 'highlight_off'; 

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

在模板中：

<mat-icon (click)="changeIcon('anotherIcon')">{{icon}}</mat-icon>

---

更新-在图标之间切换

在组件中：

public icon = 'highlight_off'; 

public toggleIcon() {
    if (this.icon === 'highlight_off') {
        this.icon = 'anotherIcon';
    } else {
        this.icon = 'highlight_off'
    }
}

在模板中：

<mat-icon (click)="toggleIcon()">{{icon}}</mat-icon>