如何更改使用Angular 2的按钮单击上的输入标签的禁用属性

Question

我试图更改使用Angular 2的按钮单击上的标签的禁用属性。到目前为止，我可以禁用它一次，但是我想切换此功能来回。

这是我的代码为我的HTML模板。

<div *ngIf = "hero"> 
      <h2> {{hero.name}} details! </h2> 
      <button (click)="goBack()">Back </button> 
      <button (click)="edit()"> Edit </button> 
      <button (click)="save()">Save </button> 
      <div><label> Id: </label> {{hero.id}} </div> 
      <div> 
       <label> Name: </label> 
       <input [(ngModel)] = "hero.name" placeholder = "name" 
       [disabled]="change" /> 
      </div> 

     </div> 

这是我的组件

hero: Hero; 
editOn: boolean = true; 
change: string;  
edit(): string 

{ 

if(this.editOn) 
{ 
    this.editOn = false; 
    this.change = "abled"; 
    console.log("Change propery status: ", this.change); 
    return this.change; 

}else if (!this.editOn) 
{ 
    this.editOn = true; 
    this.change = "disabled"; 
    console.log("Change propery status: ", this.change); 
    return this.change; 

} 

我的代码这是我目前有console.logs表明我的属性值更改浏览器。 Broswer Image

Answer 1

[disabled]指令的右侧需要为boolean值。 "disabled"和"abled"都是真值。因此，计算结果为[disabled]="true"

例子：

if(this.editOn) 
{ 
    this.editOn = false; 
    this.change = false; 
    console.log("Change propery status: ", this.change); 
    return this.change; 

}else if (!this.editOn) 
{ 
    this.editOn = true; 
    this.change = true; 
    console.log("Change propery status: ", this.change); 
    return this.change; 

}