给定 id 的禁用元素 - typescript angular答案

【问题标题】：Disabled element by given id - typescript angular给定 id 的禁用元素 - typescript angular
【发布时间】：2021-05-12 14:44:26
【问题描述】：

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

【问题讨论】：

如果只想禁用n个元素中的一个，每个元素都需要自己的变量来控制状态
你能创建一个堆栈闪电战来展示你的问题吗？
@mwilson 这是一个直截了当的问题。它们将所有元素的禁用状态从组件级变量enableTextarea 中分离出来，这对每个元素都不是唯一的。他们想要独特性。所以他们不能让他们都使用那个变量
实际上，您能否展示使您的循环遍历所有内容的代码？很可能包含*ngFor 的那个。
从您的代码中，我可以得出结论，您没有循环数据。由于您只初始化了一个组件，因此该属性似乎是“共享”的事实正是如此：相同的布尔值具有相同的值，因为它是相同的对象。任何地方都没有*ngFor，它会循环一个cmets数组来显示，给它们每个布尔值。我不能说比这更容易了。 @Taplar 可能更好地击中头部。

标签： javascript angular typescript disabled-input

【解决方案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

【讨论】：