如何使用 angular5 编辑 table 中的特定行？

Question

我的组件中有一个 table 有多个记录。我想在 table 中单击编辑按钮编辑特定行。但是当它使所有行 editable.

我有我的table这样的

我有一个 table，其中有多行。当我单击 table 中的编辑按钮时，它会生成 table editable 的所有行。这是我在 stackblitz

上的代码

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

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

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

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 属性然后您可以更改视图以显示每一行的输入。

Answer 2

使用行索引

数据中的可编辑属性通常不可用

https://angular-ivy-dfeleo.stackblitz.io

https://stackblitz.com/edit/angular-ivy-dfeleo?devtoolsheight=33&file=src/app/app.component.html

如何使用 angular5 编辑 table 中的特定行？

How can i edit specific row in table using angular5?

typescript

angular5

edit-tableview