Angular встроенное редактирование и удаление в * ngДля нажатия кнопки

Question

Это мой элемент DOM. Данные извлекаются из бэкэнда, и я использую * ngFor для отображения данных. Что я хочу, чтобы при нажатии этой кнопки редактирования я хотел, чтобы текст соответствующей строки имел тег input, а кнопка редактирования была изменена, чтобы сохранить кнопку. И после нажатия кнопки «Сохранить» ввод должен исчезнуть.

Ниже приведен код html и изображение моего элемента DOM. Прямо сейчас по нажатию кнопки редактирования я просто переключаю 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>

Answer 1

Попробуйте установить новое свойство для каждого объекта в массиве myLinkBody, чтобы сохранить текущее состояние независимо от того, редактируется он или нет.

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

и использовать дополнительное поле ввода тега, используя [(ngModel)] .Use [hidden] как для тега achor, так и для тега ввода, показать и скрыть их в зависимости от текущего состояния.

<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
}

Пример стекаблица: https://stackblitz.com/edit/angular-5hrmfv

Answer 2

Я реализовал фрагмент c, который будет отображать примеры данных в виде списка, используя * ngFor, где поля можно редактировать, нажав кнопку редактирования.

Проверьте фрагмент здесь: https://stackblitz.com/edit/angular-rmvkat

Live URL: https://angular-rmvkat.stackblitz.io/