Как я могу редактировать определенную строку в таблице, используя angular5?

Question

В моем компоненте есть таблица с несколькими записями. Я хочу редактировать конкретную строку по нажатию кнопки редактирования в таблице. Но когда это так, сделайте все строки редактируемыми.

У меня есть такой стол

У меня есть таблица, в которой есть несколько строк. Когда я нажимаю кнопку редактирования в таблице, чтобы сделать все строки таблицы доступными для редактирования. Вот мой код на stackblitz

https://stackblitz.com/edit/angular-h4hgkz

Когда я нажимаю кнопку редактирования, чтобы сделать все строки редактируемыми.

Я хочу, чтобы редактировалась только строка клика. Как я могу это сделать?

Answer 1

Что бы я сделал, это установил свойство в каждой строке, чтобы указать, редактируется ли оно, как показано ниже:

https://stackblitz.com/edit/angular-usbhmd

Код для людей, которые не хотят нажимать это.

Html

<table class="table table-hover">
  <thead>
    <tr>
      <th>Domain</th>
      <th>Registered Date</th>
      <th>Action</th>
    </tr>
    <tr *ngFor="let domain of domains; let i = index">
      <td>
        <span *ngIf="!domain.editable">{{domain.name}}</span>
        <input type="text" class="form-control" [(ngModel)]="domain.name" *ngIf="domain.editable"/>
      </td>
      <td>
        <span *ngIf="!domain.editable">{{domain.reg_date}}</span>
         <input type="date" class="form-control" [(ngModel)]="domain.reg_date" *ngIf="domain.editable"/>
      </td>
      <td><button class="btn btn-primary" (click)="editDomain(domain)">Edit</button></td>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

Компонентный

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  domains = [];
  isVisible : boolean = false;
  constructor(){
      this.domains = [
    {
      "_id" : "12323vdfvd234",
      "name" : "sixlogs.com",
      "reg_date" : "2018-04-04",
      "editable": false
    },
    {
      "_id" : "12323vdfvd234",
      "name" : "avanza.com",
      "reg_date" : "2019-04-04",
      "editable": false
    },
    {
      "_id" : "12323vdfvd234",
      "name" : "tps.com",
      "reg_date" : "2018-04-04",
      "editable": false
    },
    {
      "_id" : "12323vdfvd234",
      "name" : "utf.com",
      "reg_date" : "2019-04-04",
      "editable": false
    }
  ]
}

editDomain(domain: any){
    domain.editable = !domain.editable;
  }
}

Как видите, я добавил свойство editable к массиву domains, которое устанавливается для объекта, когда editDomain get запускается нажатием кнопки. событие. С помощью свойства editable вы можете изменить свое представление для отображения входных данных для каждой строки.