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>

这只会将display设置为none，但将元素保留在DOM树

中

Answer 2

*ngIf导致您的问题，这是正确的。当*ngIf的if检查失败时，DOM中包含的DOM元素将不复存在。如果希望DOM元素始终存在，则希望使用[hidden]而不是*ngIf，但只有在[hidden]子句为真时才会出现。

将*ngIf语句替换为[hidden]，并使用*ngIf检查的反转。即<td [hidden]="!editingModeCheck(person.Person_Id)">

Answer 3

您应该使用 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传递给您的方法，它就会被定义。