如何更改點擊按鈕標籤？

當我點擊這個按鈕時，我希望標籤改變。 HTML：如何更改點擊按鈕標籤？

<button pButton type="button" label="Edit" (click) = "foo()" style="width:auto"></button>

例如：前 - 「編輯」，點擊後 - 「保存」。

來源

2017-08-01 anikkinho

你嘗試使用'[attr.label]' ？ – cyrix

在你的組件類

@Component({ 
    templateUrl:'./mytemplate' 
}) 
export class MyComponent implements OnInit { 
    myLabel:string; 

    ngOnInit() { 
    this.myLabel = 'Edit'; 
    } 

    foo() { 
    this.myLabel = 'Save'; 
    } 
}

在HTML

注意，HTML語法發生了變化，開始使用屬性綁定，其中節點與相關聯的「標籤」屬性按鈕元素正在使用組件中myLabel變量的值進行更新。

瞭解更多關於模板和屬性綁定本指南 https://angular.io/guide/template-syntax#property-binding

補充說明中，如果您的要求是改變按鈕上顯示的文字，我會用插值如下

<button pButton type="button" (click)="foo()" style="width:auto">{{myLabel}}</button>

看到這個plunkr的工作示例https://plnkr.co/edit/wEXKxP88kcsLKuBcUUxZ?p=preview

來源

2017-08-01 09:29:41

這會失敗，因爲您錯過了標籤的上下文，它必須是ngOnInit和Foo中的'this.myLabel'。我會忽略ngOnInit，並在初始化時將缺省值設置爲'Edit'：public myLabel：string ='Edit''。 – cyrix

這是對的，我錯過了「這個」。很好發現。關於ngOnInit，角度小組建議任何組件的初始化都應該在ngOnInit中完成。現在對於這種情況，它是微不足道的，可以像你提到的那樣硬編碼或者在構造函數中設置。我使用了ngOnInit來達到最佳實踐目的（特別是如果組件不止這些） –

另外'[label]'不起作用，您必須使用'[attr.label]'。 – cyrix

您可以綁定屬性通過[attr.myAttribute]指令，因爲在你的情況下，你必須使用[attr.label]將值綁定到標籤屬性。

的成分在裏面你可以定義大幹快上點擊切換標籤屬性：

class MyComponent { 
    private labelStates = ['Edit', 'Save']; 
    public label: string = this.labelStates[0]; 

    public toggleLabel() { 
     let index = +(this.label === this.labelStates[0]); 
     this.label = this.labelStates[index]; 
    } 
}

，並將其用於您的按鈕：

<button [attr.label]="label" (click)="toggleLabel()"></button>

如果要更改按鈕上的文字使用這個：

<button (click)="toggleLabel()">{{ label }}</button>

來源

2017-08-01 09:40:47 cyrix

你的決定不起作用:( – anikkinho

有什麼不對？ – cyrix

它不會工作，因爲標籤不是按鈕的屬性。 – Faisal

你可以簡單地將它綁定到你的組件變量裏面<button>標籤。

<button pButton type="button" (click)="foo()"> style="width:auto"> 
    {{myLabel}} 
</button>

，並在你的組件類：

@Component({ 
    templateUrl:'./mytemplate' 
}) 
export class MyComponent implements OnInit { 
    myLabel:string; 

    ngOnInit() { 
    this.myLabel = 'Edit'; 
    } 
    foo() { 
    this.myLabel = 'Save'; 
    } 
}

這裏是一個工作plunker：https://plnkr.co/edit/8TOn8oN63pgJ7eA7h7tY?p=preview

來源

2017-08-01 09:56:45 Faisal

如何更改點擊按鈕標籤？

回答

相關問題