Невозможно прочитать свойство '0' неопределенного угла

Question

У меня есть следующий код, размещенный ниже. Я пытаюсь сделать таблицу редактируемой по клику, но я получаю следующую ошибку, указанную ниже. Может кто-нибудь, пожалуйста, скажите мне, почему это так и как это обойти.

<tbody>
    <tr *ngFor="let Accounts of accounts">
      <td >{{Accounts}} </td>
      <td (click)="edit(this)"><input value="{{Accounts}}" disabled onblur="disable(this)"></td>
      <td (click)="edit(this)"><input value="{{Accounts}}" disabled onblur="disable(this)"></td>
      <td (click)="edit(this)"><input value="{{Accounts}}" disabled onblur="disable(this)"></td>
      <td (click)="edit(this)"><input value="{{Accounts}}" disab`enter code here`led onblur="disable(this)"></td>
    </tr>
    </tbody>

Код машинописного текста:

public edit(el) {
    el.childNodes[0].removeAttribute('disabled');
    el.childNodes[0].focus();
    window.getSelection().removeAllRanges();
  }

  public disable(el) {
    el.setAttribute('disabled', '' );
  }

Я получаю ошибку:

ERROR TypeError: Cannot read property '0' of undefined

Answer 1

Вместо (click)="edit(this)", попробуйте (click)="edit($event)" (см. Получить пользовательский ввод из объекта $ event ).

В вашем обработчике кликов вы можете получить доступ к элементу через event.target,

public edit(event) {
  const el = event.target as HTMLElement;
  el.childNodes[0].removeAttribute('disabled');
  el.childNodes[0].focus();
  window.getSelection().removeAllRanges();
}

public disable(event) {
  const el = event.target as HTMLElement;
  el.setAttribute('disabled', '' );
}

Страница Ссылочные переменные шаблона (#var) также могут использоваться (ваши методы обработчика остаются прежними).

Возможно, вы ожидаете конфликта между строками, но Angular позаботится об этой проблеме - см. Этот вопрос Как установить уникальные ссылочные переменные шаблона внутри * ngFor?(Угловой) и демоверсия

<tbody>
  <tr *ngFor="let Accounts of accounts">
    <td >{{Accounts}} </td>
    <td #cell1 (click)="edit(cell1)"><input value="{{Accounts}}" disabled onblur="disable(cell1)"></td>
    <td #cell2 (click)="edit(cell2)"><input value="{{Accounts}}" disabled onblur="disable(cell2)"></td>
    <td #cell3 (click)="edit(cell3)"><input value="{{Accounts}}" disabled onblur="disable(cell3)"></td>
    <td #cell4 (click)="edit(cell4)"><input value="{{Accounts}}" disabled onblur="disable(cell4)"></td>
  </tr>
</tbody>