ngmodel和input的关系

最新推荐文章于 2021-12-09 19:49:04 发布

原创最新推荐文章于 2021-12-09 19:49:04 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular2 #input

本文探讨了在Angular框架中如何正确地切换Input元素的禁用状态，并解析了[(ngModel)]双向数据绑定的工作原理及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看代码

<button 
type="button" (click)="doSomething()">{{name}}</button>
<div *ngIf="title">
<input 
type="text" [(ngModel)]='title' [disabled]='disabled'>
</div>

这是类声明的地方

export 
class AppComponent {
title = 
"app";
private flag:
boolean =
true;
private disabled:
boolean =
true;
private name: string
= "取消禁用";
doSomething() {
if (this.flag) {
this.disabled
= false;
this.name 
= "禁用";
} else {
this.disabled
= true;
this.name 
= "取消禁用";
}
this.flag 
= !this.flag;
}
}

起初呢我是这么写的

export 
class AppComponent {
title = 
"app";
private flag:
boolean =
true;
private disabled:
string =
'disabled';
private name
= "取消禁用";
doSomething() {
if (this.flag) {
this.disabled
= '';
this.name 
= "禁用";
} else {
this.disabled
= 'disabled';
this.name 
= "取消禁用";
}
this.flag 
= !this.flag;
}
}