如何使用 angular5 编辑表格中的特定行？答案

【问题标题】：How can i edit specific row in table using angular5?如何使用 angular5 编辑表格中的特定行？
【发布时间】：2019-01-09 16:07:02
【问题描述】：

我的组件中有一个包含多条记录的表。我想在表中单击编辑按钮编辑特定行。但是当它使所有行都可编辑时。

我的桌子是这样的

我有一个表格，其中有多行。当我单击表格中的编辑按钮时，它会使表格的所有行都可编辑。这是我在 stackblitz 的代码

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

当我点击编辑按钮时，它使所有行都可编辑。

我只想点击可编辑的行。我该怎么做？

【问题讨论】：

标签： typescript angular5 edit-tableview

【解决方案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 时，该属性会为对象设置事件。使用editable 属性，您可以更改视图以显示每一行的输入。

【讨论】：

我不想添加额外的密钥。那么解决办法是什么呢？
感谢帮助。我没有添加任何密钥就完成了:)
你是怎么做到的？
通过设置条件*ngIf="domain._id === editId"。在编辑时我设置了 editId = domain._id