Необходимо получить определенный индекс строки элемента html от * ngFor, чтобы активировать булеву функцию - PullRequest
0 голосов
/ 11 февраля 2019

Я пытаюсь построить динамическую таблицу в 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), например.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...