如何编辑列表中的文本输入

Question

我有一个评论框和每个框附带的按钮的列表。当用户单击编辑时，我只希望启用该特定文本框。单击“保存”或“取消”时，我希望隐藏文本框并显示“

”。

这是我的 ng-template，我试图通过索引进行跟踪

         <ng-template #item let-item let-i="index">
           <textarea [disabled]="IsDisabled(i)" [(ngModel)]="item.commentText" nz-input rows="4"></textarea>
             <nz-form-item>
              <button nz-button nzType="primary" [nzLoading]="submitting" (click)="openEdit(i)">Edit Comment</button>
               <button (click)=updateCommentsById(item, index)>                                    
                Save Comment</button>
              </nz-form-item>
              </nz-form-item>
           </ng-template>



async updateCommentsById(item, index) {
        console.log(item, index);

}
openEdit(index){
//Open this list item for edit
}

 IsDisabled(index, disableMe = true) {
    return disableMe;
}

editCommentClicked(index) {
    this.IsDisabled(index, false);
}

cancelCommentClicked(index) {
    this.IsDisabled(index, true);
}

正如您在此列表中看到的那样，每一行都有一个文本区域。当用户点击时 在“编辑”按钮上，我希望仅为该行启用文本框。 当用户单击“取消”或“保存”时，我希望仅为该行附加相应的操作。

如何使用索引来编辑并保存每一行

Answer 1

您想要在这里做的是添加一个元素 id 并将索引附加到该元素 id

<ng-template #item let-item let-i="index">
           <textarea id="TextComment_{{index}}" [disabled]="IsDisabled(i)" [(ngModel)]="item.commentText" nz-input rows="4"></textarea>
             <nz-form-item>
              <button id="EditComment_{{index}}" nz-button nzType="primary" [nzLoading]="submitting" (click)="openEdit(i)">Edit Comment</button>
               <button id="SaveComment_{{index}}" (click)=updateCommentsById(item, index)>                                    
                Save Comment</button>
              </nz-form-item>
              </nz-form-item>
           </ng-template>

然后点击按钮，您可以根据 id 名称从 dom 中公开您的元素

onClick(){
  (document.getElementById('EditComment_' + index) as any).disabled = true;
        (document.getElementById('CancelButton_' + index) as any).disabled = false;
        (document.getElementById('TextComment_' + index) as any).disabled = false;
        (document.getElementById('SaveComment_' + index) as any).disabled = false;
}