如何解决使用 angular 切换文本框
一次只能显示一个文本框,如果点击切换需要隐藏第一个文本框并需要显示第二个文本框。如果我再次单击需要显示第一个文本框并隐藏第二个文本框。在下面尝试过,但无法在自己加载时显示一个文本框...
HTML:
<div><input *ngIf="text1"
id="test1"
type="text"
placeholder="Textbox1"
/>
</div>
<div>
<input *ngIf="text2"
id="test2"
type="text"
placeholder="Textbox2"
/>
</div>
<button (click)="toggle()">Toggle</button>
.ts
toggle() {
this.text1 = !this.text1;
if (this.text1) {
this.text2 = false;
this.text1 = true;
} else {
this.text2 = true;
this.text1 = false;
}
}
解决方法
您可以使用 1booleanItem
toggle() {
this.text1 = !this.text1;
}
<div><input *ngIf="text1"
id="test1"
type="text"
placeholder="Textbox1"
/>
</div>
<div>
<input *ngIf="!text1"
id="test2"
type="text"
placeholder="Textbox2"
/>
</div>
<button (click)="toggle()">Toggle</button>
,
在下面尝试过,但无法在自己加载时显示一个文本框
您可以将其中一个文本框的布尔值设置为 true:
public text1: boolean = true;
使用单个变量来跟踪可见性:
export class NgbdTypeaheadTemplate {
public showText1: boolean = true;
toggle() {
this.showText1 = !this.showText1;
}
}
和
<div><input *ngIf="showText1"
id="test1"
type="text"
placeholder="Textbox1"
/>
</div>
<div>
<input *ngIf="!showText1"
id="test2"
type="text"
placeholder="Textbox2"
/>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。