隐藏和显示编辑输入不起作用(角度)
提问于 2021-02-13 22:02:00
我正在尝试制作一个Edit按钮，当按钮被按下时会出现/消失一个输入字段。它以前是工作的，但是当我尝试制作一个显示表单时，它似乎无法识别"title.value"这是非常奇怪的。我使用Boolean作为"edit"变量，并使用*ngIf来显示/隐藏表单。如果我把*ngIf="edit"去掉，它就会像一个显示你所写内容的表单一样正常工作。我是不是遗漏了什么？
下面是HTML：
<input type="text" #title *ngIf="edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2> 下面是.ts：
public edit = false;
public groupTitle = "";
getTitle(val) {
this.groupTitle = val;
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-13 22:32:01
在同时实现ngIf指令和将输入元素引用为#title时会出现问题。在这种情况下，您可以使用hidden而不是ngIf。
这是你的html：
<input type="text" #title [hidden]="!edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2> 有两种更优雅的方法来绑定值并将其呈现在页面上。
第一种方法是去掉Get title按钮，直接对输入元素使用(input)方法。在这种情况下，Html如下所示：
<input type="text" #title *ngIf="edit" (input)="getTitle(title.value)"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>第二种方法是使用[(ngModel])而不是getTitle方法，并将输入值直接绑定到groupTitle变量。
Html将如下所示：
<input type="text" #title *ngIf="edit" [(ngModel)]="groupTitle"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>您的.ts文件：
edit = false;
groupTitle = "";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66190354
复制相关文章
![[腾讯云上云实践]基于StyleGan2的图像生成基本操作](https://ask.qcloudimg.com/article-cover-image/1695180/ywcoswweww.png)
腾讯云开发者
