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

Question

我正在尝试制作一个编辑按钮，当按下按钮时，输入字段会出现/消失。它以前可以工作，但是当我尝试制作显示表单时，它似乎无法识别"title.value" 这很奇怪。我将布尔值用于 "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;
  }

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 = "";