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

Question

我需要你的帮助。当有评论列表作为文本区域并且我想通过给定此元素 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 的评论，他想要实现的是在单击编辑（右边的铅笔）后禁用单个评论。在我的代码中，所有评论都被编辑，无论谁点击。

Answer 1

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

在你的组件中


enableTextarea = [false];

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

现在在您的 html,

通过添加索引改变循环

    <div *ngFor="let comment of comments; let i = index">

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

将所有enableTextarea更改为enableTextarea[i]
将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>

See Demo Here

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

Disabled element by given id - typescript angular

javascript

disabled-input

typescript

angular