通过按钮单击在 *ngFor 内进行角内联编辑和删除答案

【问题标题】：Angular inline-editing and deleting withinin *ngFor with button click通过按钮单击在 *ngFor 内进行角内联编辑和删除
【发布时间】：2020-04-17 03:20:24
【问题描述】：

这是我的 DOM 元素。正在从后端获取数据，我正在使用 *ngFor 来显示数据。单击该编辑按钮时我想要什么我希望相应行的文本具有input 标记，并且将编辑按钮更改为保存按钮。点击保存按钮后，输入应该会消失。

以下是我的 DOM 元素的 html 代码和图像。现在点击编辑按钮，我只是将editable 切换到true 或false，但它也不起作用。

<span *ngFor="let body of myLinkBody;let last=last" class="myLinkBody" [class.myLinkBodyLast]="last">
  <a [href]="domainURL+body.href" contenteditable="editable">{{body.value}}</a>
  <div id="editLinkButton"><a (click)="edit($event,body)"></a>  </div>
  <div id="deleteLinkButton"><a></a></div>
</span>

【问题讨论】：

标签： html css angular typescript

【解决方案1】：

尝试为 myLinkBody 数组中的每个对象设置一个新属性，以保持当前状态，无论其是否正在编辑。

myLinkBody.map(body => { body.currentState="edit"; return body});

并使用额外的标签输入字段使用[(ngModel)]。在锚标签和输入标签上使用[hidden]，根据当前状态显示和隐藏它们。

<span *ngFor="let body of myLinkBody;let last=last;let i=index" class="myLinkBody" [class.myLinkBodyLast]="last">
  <a [href]="domainURL+body.href" [hidden]="body.currentState=='save'">{{body.value}}</a>
   <input type="text" [(ngModel)]="myLinkBody[i].name" [hidden]="body.currentState=='save'"/> 
  <button (click)="edit($event,body,index)">{{body.currentState}}</button>
  <div id="deleteLinkButton"></div>
</span>

在编辑功能中

edit(event,body,index){
   if(body.state == 'save')
       this.myLinkBody[index].state='edit'; 
    else
      this.myLinkBody[index].state='save';
    .....your code here
}

stackblitz 示例：https://stackblitz.com/edit/angular-5hrmfv

【讨论】：

【解决方案2】：

我已经实现了一个基本的 sn-p，它将使用 *ngFor 将示例数据显示为列表，其中可以通过单击编辑按钮来编辑字段。

在此处查看 sn-p：https://stackblitz.com/edit/angular-rmvkat

直播网址：https://angular-rmvkat.stackblitz.io/

【讨论】：