单击铅笔图标编辑内容答案

【问题标题】：Edit content on click of pencil icon单击铅笔图标编辑内容
【发布时间】：2021-04-20 18:31:00
【问题描述】：

我正在研究 Angular 应用程序。我的页面有标题，代码如下

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

因此标题将在靠近/平行的位置显示铅笔图标。我不想将其显示为文本字段，但是当用户单击铅笔图标时，我想允许用户输入标题。我该怎么做？

【问题讨论】：

标签： angular angular8 angular9 angular10

【解决方案1】：

你可以使用：

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

还有你的 ts 文件

onEdit() {
    // JS Edit Code
}

【讨论】：

鼠标在外部点击或进入时如何在屏幕上更新？

【解决方案2】：

Zaib，Angular 在 .ts 和 .html 中的变量之间建立了关系。所以“简单的方法”是有一个 div 和一个输入。一个变量让你显示一个或另一个

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>

看看你如何只在变量“editing”为假时显示“{{title}}”，并且只在变量“editing”为真时显示输入。

当您“单击”“铅笔”时，您将变量编辑设置为 true，当您从输入中失去焦点时，您将变量编辑设置为 false

嗯，你现在知道他基本了。但我们正在改进代码。如果您进行（单击）焦点转到输入，这很好。所以我们将采取另一种方法：我们将使用 [style.display] 来显示或不显示“span”和“input”

<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()
     })
}

看看我们如何编写函数来响应 .html 中的事件 - 典型事件、（点击）、（输入）、（模糊）......

此外，为了引用函数内部 .ts 中的变量，我们使用this.+变量名。

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

还有更多，看看officials docs

【讨论】：