如何根據不同條件在角度2中更改相同按鈕的值

Question

我有兩個選項，即“編輯用戶”和“添加新用戶”。我在兩個地方都使用相同的按鈕。我想在嘗試添加新用戶時將按鈕值更改為“保存”。

我的模板

<input type="button" (click)="addNewUser()" value="Add">

.ts-中的偽代碼

addNewUser(){
if("editUser"){
//Keep the value as ADD
}
else{
//Change the value to Save
}
}

Answer 1

您可以按以下方式使用它：

<input type="button" (click)="addNewUser()" [value]="editUser ? 'ADD' : 'SAVE'" />

參見plunker http://embed.plnkr.co/lEFPmd9HS5EgZDsebA4K/

希望這可以幫助。

Answer 2

您可以在組件類中添加一個屬性（例如值），然后在if語句中對其進行更改。

sample.component.ts

public value: string = 'Add';

addNewUser(){
    if("editUser"){
        //Keep the value as ADD
        this.value = 'Add';
    } else {
        //Change the value to Save
        this.value = 'Save';
    }
}

sample.component.html

<input type="button" (click)="addNewUser()" value="{{ value }}">

Answer 3

這應該工作：

<input type="button" (click)="addNewUser()" value="{{ value }}">

在您的組件中：

public value: string = 'Add';

addNewUser() {
    if("editUser") {
        //Keep the value as ADD
        this.value = "Add";
    } else {
        //Change the value to Save
        this.value = "Save";
    }
}

Answer 4

<input type="button" (click)="addNewUser()" value="ADD" id="btn">

  addNewUser(){
    let btnTxt = (document.getElementById('btn').value).toLocaleLowerCase();
    if(btnTxt === 'add'){
      document.getElementById('btn').value = 'EDIT';
    }else{
      document.getElementById('btn').value = 'ADD';
    }
  }