Angular 单击铅笔图标即可编辑内容

我正在研究角度应用。我的页面中有一个标题，代码如下

<div>my Title
   <fa name="pencil"></fa>
 </div>

我的标题

因此，标题将以铅笔图标显示在其附近/平行位置。我不想将其显示为文本字段，但当用户单击铅笔图标时，我想允许用户输入标题。我怎样才能做到这一点？

您可以使用：

<div (click)="onEdit()"><fa name="pencil"></fa></div>

---

Zaib，在.ts和.html中的变量之间建立关系。所以“简单方法”是有一个div和一个input。变量使您可以显示一个或另一个

editing:boolean=false;  //<--this is your variable in .ts
title:string="my Title"; //<--another variable 


<span *ngIf="!editing">{{title}}</span>
<input *ngIf="editing" [(ngModel)]="title" (blur)="editing=false">
<span (click)="editing=true"><fa name="pencil"></fa></span>

看看我们如何在.html-typicalsevents，（click），（input），（blur）中编写响应事件的函数

此外，为了引用函数中.ts中的变量，我们使用

this.

+变量名称

奇怪的“#inputId”称为模板引用变量，允许我们引用html元素

---

还有更多内容，请看一下

当在屏幕外单击鼠标或单击enter时，屏幕上的内容是如何更新的？

editing:boolean=false;  //<--this is your variable in .ts
title:string="my Title"; //<--another variable 


<span *ngIf="!editing">{{title}}</span>
<input *ngIf="editing" [(ngModel)]="title" (blur)="editing=false">
<span (click)="editing=true"><fa name="pencil"></fa></span>

<span [style.display]="editing?'none':null">{{title}}</span>
<input #inputId [style.display]="!editing?'none':null" 
        [(ngModel)]="title" (blur)="editing=false">
<span (click)="edit(inputId)"><fa name="pencil"></fa></span>

edit(element:any){
     this.editing=true;
     setTimeout(()=>{
       element.focus()
     })
}