当我点击编辑给我输入字段和2个按钮

Question

 <div class="fa fa-edit clickable edit-icon" (click)="editProject()"></div>
{{project.name}}

这是我想要的代码，当我点击此图标时，project.name需要变成输入字段并在同一页面中给我2个按钮

我正在使用html和typescript。

Answer 1

您可以使用ngIf和属性绑定

在您的组件类中：

public isInputVisible : boolean = false;
public editProject(): void {
   this.isInputVisible = true;
}

在你的模板中：

<div class="fa fa-edit clickable edit-icon" (click)="editProject()"></div>
<ng-container *ngIf="!isInputVisible">{{project.name}}</ng-container>
<input [(ngModel)]=project.name"" *ngIf="isInputVisible" />