Question

我正在尝试使用Angular 2更改按钮单击时标记的disabled属性。到目前为止，我可以禁用它一次，但是我想来回切换此函数。

这是我的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;

}

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

1 个答案: