Question

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

但问题是我有多个评论，我通过ng填充。如何从已经点击编辑的所选div中删除readonly属性。

这就是我的尝试。

    <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分钟的评论启用评论的编辑按钮，然后我们显示删除选项。 / p>

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>

如何在单击时使文本框可编辑，并将一个按钮添加到Angular侧

1 个答案: