从 *ngIf 有条件可见的输入标签中获取值

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 文件中，我声明了一个布尔类型的变量“电话”和一个方法：

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 与 [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>