Question

我的组件中有一个具有多个记录的表。我要在表中单击“编辑”按钮上编辑特定行。但是，当所有行都可编辑时。

我有这样的桌子

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

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

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

我只希望单击的行可编辑。我该怎么办？

Answer 1

使用行索引

数据中的可编辑属性一般不可用

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

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

Answer 2

我要做的是在每一行上设置一个属性，以指示是否正在编辑它，如下所示：

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

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

2 个答案: