如何使用angular2/4材质更改点击事件中的材质图标？

Question

我有MD-片组内的以下图标：

<md-tab-group> 
    <md-tab *ngFor="let tab of arrayOfTabs"> 
    <ng-template md-tab-label> 
     <md-icon (click)="changetab()">close</md-icon> 
    </ng-template> 
    My Tab Content 
</md-tab> 
</md-tab-group> 

我想要让这个而不是“关闭”材料的图标，将其更改为“明星”图标。我如何通过该特定选项卡的图标上的单击事件来实现？

Answer 1

在组分：

public icon = 'close'; 

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

在HTML

<md-icon (click)="changeIcon('star')>{{icon}}</md-icon> 

Answer 2

打字稿

let iconName = 'delete'; 

changeIcon(newIcon:string) :void { 
this.iconName = newIcon; 
} 

HTML代码

<md-icon >{{ iconName }}</md-icon> 

<button (click)="changeIcon('error')" >error</button> 
<button (click)="changeIcon('warning')">warning</button> 
<button (click)="changeIcon('folder')">folder</button> 

当点击这个按钮时，图标将被改变。