Angular: * ngIf тег на элементе ввода делает его неопределенным. Невозможно прочитать значение из поля ввода

Question

Я запутался, почему выдается это сообщение об ошибке. Я сузил, что проблема с использованием ngIf приводит к тому, что мое поле ввода не определено.

HTML:

<td *ngIf="editingModeCheck(person.Person_Id)">
    <input type="text" id="firstNameUpdate" class="form-control" #firstNameUpdate value="{{person.First_Name}}">
</td>

Позже в моем HTML я использую данные, передавая firstNameUpdate.value в метод, и получаю следующую ошибку:

TypeError: Cannot read property 'value' of undefined
    at Object.eval [as handleEvent]

После значительных исследований я очень уверен, что использование * ngIf приводит к тому, что поле ввода становится неопределенным, но я не понимаю, почему или как решить проблему.

Любая помощь приветствуется.

Answer 1

* ngIf удаляет элемент из DOM, если условие не выполняется. Так что да, это было бы неопределенным. Альтернативой будет

<td [hidden]="!editingModeCheck(person.Person_Id)">
    <input type="text" id="firstNameUpdate" class="form-control" #firstNameUpdate value="{{person.First_Name}}">
</td>

Это просто установит отображение на none, но сохранит элемент в дереве DOM

Answer 2

Вместо использования значение вы должны использовать ngModel . Попробуйте изменить свой входной код следующим образом:

<td *ngIf="editingModeCheck(person.Person_Id)">
    <input [(ngModel)]="person.First_Name" type="text" id="firstNameUpdate" class="form-control" #firstNameUpdate>
</td>

Затем в вашем HTML вместо передачи firstNameUpdate.value вы можете просто передать person.First_Name в ваш метод, и он всегда будет определен.

Answer 3

Вы правы, что *ngIf вызывает вашу проблему. Когда проверка if не выполняется для *ngIf, содержащиеся в ней элементы DOM перестают существовать в DOM. Вы хотите использовать [hidden] вместо *ngIf, если хотите, чтобы ваш DOM-элемент всегда существовал, но появлялся только тогда, когда условие [hidden] имеет значение true.

Замените ваше заявление *ngIf на [hidden] и используйте обратный чек *ngIf. т.е. <td [hidden]="!editingModeCheck(person.Person_Id)">