Question

我试图在Angular中建立具有添加，编辑，删除功能的动态表。我的两个编辑/删除按钮均作为其自己的列存在于表行的每一行中。编辑按钮（onclick）旨在使3个文本数据字段（与编辑按钮本身位于同一行）中的每一个都变成输入字段，然后可以保存其用户输入的文本。

<table id="thetable" align="center">
<tr>
  <th>Application ID</th>
  <th>Description</th>
  <th>API Key</th>
  <th>EDIT/DELETE</th>
</tr>
<tr id="newtablerow" ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
  <td id="tablevalues" *ngFor="let col of columns">
    <span id="columnText" ng-init="getRowIndex(i)" *ngIf="!editing">{{prov[col]}}</span>
    <span class="editfield" *ngIf="editing">
      <input id="changeText" ng-init="getChangeTextCol(col)" type="text" style="margin-right: 10px" placeholder="{{prov[col]}}">
      <button ngOnload="getChangeTextCol(col)" (click)="save(changeText.value); !editing">Save</button>
    </span>
  </td>
  <td id="editdelete">
    <button class="edit" name="editButton" (click)="editToggle(i)">/</button>
    <button class="delete" (click)="deleteRow(i)">x</button>
  </td>
</tr>

public editing: boolean = false;

editToggle(event) {
var table = (<HTMLTableElement>document.getElementById("thetable"));
var getTextFields = table.getElementsByClassName("columnText");   

for (var i = 0; i < getTextFields.length; i++) {
  if (getTextFields[i].getRowIndex(event) == event) {
    getTextFields[i].editing = !getTextFields[i].editing;
   }
 }
}

getRowIndex(event) {
console.log("row index = " + event);
return event;
}

getChangeTextCol(event) {
return event;
}

deleteRow(event) {
this.providers.splice(event, 1);
}

单击编辑按钮时激活

editToggle（），并通过* ngFor指定的变量i查找自身的当前行索引。但是，我还需要告诉angular包含要显示的html输入字段的span元素的行索引，但是我收到一条错误消息，指出类型'Element'上不存在属性'getRowIndex'。例如，这适用于HTML元素中的其他功能，例如deleteRow（i）。

需要从* ngFor获取特定的html元素行索引以激活布尔函数

0 个答案: