如何使用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> 

當點擊這個按鈕時，圖標將被改變。