如果选择了某个选项，如何动态创建输入字段？答案

【问题标题】：How can I dynamically create an input field if certain option is selected?如果选择了某个选项，如何动态创建输入字段？
【发布时间】：2022-01-25 04:37:37
【问题描述】：

我正在尝试根据用户输入动态创建一个新的输入字段。请看例子，这样会更有意义。

如果用户选择“HS2”，我想在选择该值时创建一个新的输入字段。如果用户要选择 HS2，但更改为（例如）HS1，我想删除该输入字段，因为它应该只在选择后出现。这应该是实时的，而不是在用户单击提交之后。这是我当前的代码：

<td pEditableColumn style="width: 70px; word-wrap: break-word;">
  <select class="form-control-sm" [disabled]="searchBeanRes.rowAllSelect" [(ngModel)]="rowData.assignToAllTaskType" [(ngModel)]="rowData.taskTypeName" (click)="taskAssign(rowData,rowData.taskTypeName)">
     <option [value]="null">--Select--</option>
     <option *ngFor="let object of rowData.taskListMap | keyvalue" [ngValue]="object.value"> {{object.value}}</option>
  </select>
</td>

感谢您的帮助！！万分感谢。我正在学习前端 Web 开发。

【问题讨论】：

标签： html angular typescript

【解决方案1】：

只需使用*ngIf：

<td pEditableColumn style="width: 70px; word-wrap: break-word;">
  <select class="form-control-sm" [disabled]="searchBeanRes.rowAllSelect" [(ngModel)]="rowData.assignToAllTaskType" [(ngModel)]="rowData.taskTypeName" (click)="taskAssign(rowData,rowData.taskTypeName)">
     <option [value]="null">--Select--</option>
     <option *ngFor="let object of rowData.taskListMap | keyvalue" [ngValue]="object.value"> {{object.value}}</option>
  </select>

  <ng-container *ngIf="value == 'H2'">
    <input name="extra" [(ngModel)]="extraVariable">
  </ng-container>
</td>

【讨论】：

非常感谢，这工作:)