选择特定项目时将选择更改为文本框？答案

【问题标题】：To change the select to textBox when a particular item is selected?选择特定项目时将选择更改为文本框？
【发布时间】：2020-04-03 15:35:02
【问题描述】：

我一直在尝试实现 UI，如果在 Angular 的选择标签中选择了特定选项，它应该更改为 textBox

这是我的选择代码

 <td><select [(ngModel)]="data.name" (change)="onSearchChange(i)">
      <option *ngFor="let k of changeVariable" value="{{k.key}}">{{k.name}}</option>
    </select>

我该怎么做，谢谢。

【问题讨论】：

你能详细描述一下吗？
单击下拉列表中的特定值时，选择应替换为<input [(ngModel)]="data.name" (input)="onSearchChange(i)" />

标签： angular

【解决方案1】：

你可以在这里使用*ngIf 类似

    <select [(ngModel)]="data.name" (change)="onSearchChange(i)" *ngIf="data.name !='yourValue'">
          <option *ngFor="let k of changeVariable" value="{{k.key}}">{{k.name}}</option>
        </select>

    <input [(ngModel)]="data.name" (input)="onSearchChange(i)" *ngIf="data.name =='yourValue'"/>

更新使用像isInputVisible这样的标志

   <select [(ngModel)]="data.name" (change)="onSearchChange(i)" *ngIf="!isInputVisible">
          <option *ngFor="let k of changeVariable" value="{{k.key}}">{{k.name}}</option>
        </select>

    <input [(ngModel)]="data.name" (input)="onSearchChange(i)" *ngIf="isInputVisible"/>

在你的onSearchChange

isInputVisible:boolean
onSearchChange(value){
if(value =='yourValue')
this.isInputVisible=true;
}

【讨论】：

等我试试
它确实完成了，但是我尝试编辑时它会改变，感谢您的回答

【解决方案2】：

您可以使用*ngIf 来根据值状态替换特定元素，例如：

<input *ngIf="data.name" [(ngModel)]="data.name" (input)="onSearchChange(i)" />
<select *ngIf="!data.name" [(ngModel)]="data.name" (change)="onSearchChange(i)">
      <option *ngFor="let k of changeVariable" value="{{k.key}}">{{k.name}</option>
</select>

【讨论】：

是的，我正在尝试，实际上是一个动态表单，我们可以在其中添加表单，所以我需要维护一个包含真假的数组。顺便说一句，感谢您的回答
是的，这就是我们所不知道的。您需要输入更多信息才能获得正确答案。