从* ngIf条件可见的input-tag获取值

Question

我在HTML中有一个简单的表单。根据使用单选按钮选择的选项，可以使用* ngIf。

显示不同的输入字段

<table>
    <tr>
        <td><label>name</label></td>
        <td><input #name /></td>
    </tr>
    <tr>
        <td>
            <input type="radio" name="contact" value="phone" (click)="usePhone(true)" #p>
            <label for"p">phone</label>
        </td>
        <td>
            <input type="radio" name="contact" value="email" (click)="usePhone(false)" #m>
            <label for"m">email</label>
        </td>
    </tr>
    <tr *ngIf="phone">
        <td><label>phone</label></td>
        <td><input #phone /></td>
    </tr>
    <tr *ngIf="!phone">
        <td><label>email</label></td>
        <td><input #email /></td>
    </tr>
 <table>

在TypeScript文件中，我声明了一个varibale＆＃34; phone＆＃34; boolean类型和方法：

usePhone(phone: boolean): void {
    this.phone = phone
}

现在，我希望在点击按钮时获取值：

<button (click)="add(name.value, phone.value, email.value);">
    OK
</button>

但是当我尝试它时，浏览器控制台表示手机未定义，即使它被选中并且可见。当我删除* ngIf语句，以便一切都可见时，它可以正常工作。我该怎么办？

Answer 1

手机变量未定义，因为当您将手机设置为false时，不会呈现#phone元素。

隐藏行而不是删除：

<tr [hidden]="!phone">

和

<tr [hidden]="phone">

*ngIf vs [hidden]

来自angularjs官方文档：

  

隐藏元素与删除元素完全不同   NgIf。

     

隐藏元素，该元素及其所有后代时   留在DOM中。这些元素的所有组件都留在内存中   和Angular可能会继续检查更改。你可能会抱着   对于相当大的计算资源和降低性能   用户无法看到的东西。

     

当NgIf为false时，Angular会删除元素及其后代   来自DOM。它会破坏它们的组件，可能会释放出来   大量资源，带来更灵敏的用户体验。

     

显示/隐藏技术适用于少数孩子的元素。   隐藏大型组件树时应该小心; NgIf可能是   更安全的选择。

     

https://angular.io/guide/template-syntax#ngif

Answer 2

问题在于usePhone功能。您正在将this.phone设置为布尔值并在html中使用它 作为对input标签的尊重。您只需要更改input标记的引用变量名称，如：

<td><input #phoneRef /></td>

点击传递phoneRef.value：

<button (click)="add(name.value, phoneRef.value, email.value);">

Answer 3

我们无法访问* ngIf中的变量，您可以使用[hidden]

<tr [hidden]="!phone">
    <td><label>phone</label></td>
    <td><input #phone2 /></td>
</tr>
<tr [hidden]="phone">
    <td><label>email</label></td>
    <td><input #email /></td>
</tr>