Я пытаюсь построить динамическую таблицу в 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 () активируется при нажатии кнопки редактирования и находит текущий индекс строки самого себя по переменной i, заданной * ngFor.Однако мне также нужно сообщить angular индекс строки элемента span, содержащего поле ввода html, которое нужно показать, но я получаю сообщение об ошибке, говоря, что свойство 'getRowIndex' не существует для типа 'Element'.Это работает для других функций в элементах HTML, таких как deleteRow (i), например.