隐藏和显示编辑输入不起作用（Angular）

Question

我正在尝试制作一个“编辑”按钮，按下按钮时输入字段 appears/disappears。它以前工作过，但是当我尝试制作显示表单时，它似乎无法识别 "title.value" 这很奇怪。我将布尔值用于 "edit" 变量，并结合 *ngIf 到 show/hide 表单。如果我取消 *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 = "";

隐藏和显示编辑输入不起作用（Angular）

Hiding and Showing Edit Input not working(Angular)

html

angular

typescript

edit

show-hide