时间戳

首页 > 解决方案 > 给定 id 的禁用元素 - typescript angular

javascript - 给定 id 的禁用元素 - typescript angular

问题描述

我需要你的帮助。当有评论列表作为文本区域并且我想通过给定此元素 ID 禁用单个元素（评论）时，这是可能的。是）我有的：

<div style="float: right">
    <button mat-button color="primary">
        <mat-icon class="md-24" (click)="edit()" >edit</mat-icon>
    </button>
     <textarea [disabled]='enableTextarea' class="comment-textarea" matInput cdkTextareaAutosize rows="2">{{comment.content}}</textarea>       
</div>

{{coment.content}} - 是评论的内容，也是我想要编辑的内容（表示启用）

export class CommentComponent implements OnInit {

enableTextarea = true;

edit() {
    this.enableTextarea = !this.enableTextarea;
  }

}

在这里，我有两个 id 为 1 和 2 的评论，以及他想要在单击编辑（右侧的铅笔）后禁用单个评论后实现的目标。在我的代码中，所有评论都被编辑，无论谁点击。

标签： javascriptangulartypescriptdisabled-input

解决方案

您需要从enableTextarea更改boolean为boolean[]。这样每个项目将独立于另一个

在您的组件中


enableTextarea = [false];

edit(i) {
  this.enableTextarea[i] = !this.enableTextarea[i];
}

现在在你的 html 中，

  1. 通过添加索引更改循环
    <div *ngFor="let comment of comments; let i = index">

       <!-- Other Contents Here -->
    </div>

  1. 全部更改enableTextarea为enableTextarea[i]

  2. 更改edit()为edit(i)

                <div *ngFor="let comment of comments; let i = index">
                    <div>
                        {{comment.createDate }}
                        <div style="float: right">
                            <button mat-button color="primary" (click)="deleteComment(comment.id)">
                <mat-icon class="md-24">delete</mat-icon>
              </button>
                            <button mat-button color="primary">
                <mat-icon class="md-24" (click)="edit(i)">edit</mat-icon>
              </button>
                        </div>
                    </div>
                    <div *ngIf="enableTextarea[i] == false">
                        <h5 class="h5-edited">editing</h5>
                    </div>
                    <textarea [disabled]='enableTextarea[i]' class="comment-textarea" matInput cdkTextareaAutosize
                    rows="2">{{comment.content}}</textarea>
                    <button mat-button color="primary" *ngIf="enableTextarea[i] == false" (click)="updateComment(comment.id)">Save
          </button>
                    <br><br><br>
        </div>

在此处查看演示

推荐阅读