隐藏和显示编辑输入不工作(Angular)

Question

我正在尝试制作一个编辑按钮，当按钮按下时出现/消失的输入字段。它以前是工作的，但是当我试图制作一个显示形式时，它似乎不识别"title.value"，这是非常奇怪的。我使用布尔值与*ngIf结合的"edit"变量来显示/隐藏表单。如果我把*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;
}

Answer 1

您在一起实现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 = "";