如何使文本框在单击时可编辑，并将按钮添加到侧面的角度

Question

我正在尝试添加一个功能，就像堆栈溢出评论一样，单击编辑链接，div 转换为文本框，我们得到一个提交按钮。

但问题是我有多个评论，我正在通过 ng 填充我如何从单击编辑的选定div 中删除只读属性。

这就是我尝试过的。

<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [@flyInOut]>
<div class="well">
<input type=”text” value="{{i.comment}}" [readonly]="false" /><span>
Edited <time>{{today | amDifference: i.createdAt :'minutes'
: false}}</time> before
</span><a><i
class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="edit(index)"></i></a>
</div>
</div>
</div>
</div>

我也希望有一些类似检查时间的东西，我已经完成了相同的后端部分，如何仅为 amDifference 小于 5 分钟的注释启用编辑按钮，然后我们显示删除选项。

Answer 1

您可以使用 ngIf-Else 提供第二个模板来显示，如下所示：

<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [@flyInOut]>
<div *ngIf="i.editMode; else editBlock" class="well">
<!-- Show stuff here -->
<a>
<i class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="i.editMode=true">
</i>
</a>
</div>
<ng-template #editblock>
<div class="well">
<!-- Edit stuff here -->
<input type="button" (click)="i.editMode=false" value="Done"/>
</div>
</ng-template>
</div>
</div>
</div>