Angular-我的ngIf仅隐藏一次输入标签

Question

*ngIf="currentIdea.oetSupportNeeded"我有一个包含2个值的下拉列表-是和否，以及另一个可以自由编写的输入标签。 我只想在用户在下拉列表中选择“是”时显示input-label在选择“否”时隐藏它。

我的问题是，以下代码只能运行一次-当页面加载且选择“否”时，输入标签是隐藏的，但是当您选择“是”然后再次选择“否”时，标签显示并且不会消失不再。 我希望它根据用户的选择打开/关闭

我尝试使用ngShow ， ngHide ， [disabled]等。

<div class="select-wrapper" [ngClass]="{'select-wrapper-blocked': isNotAdmin()}">
            <select class="input-control" [(ngModel)]="booleanVariable">
                <option value="false">No</option>
                <option value="true">Yes</option>
            </select>
        </div>
    </div>

    <div class="col form-input" [ngClass]="{'form-input-blocked': isNotAdmin()}">
        <p class="input-label">
            Some text
        </p>
        <input *ngIf="booleanVariable" class="input-control" [(ngModel)]="stringVariable" />
    </div>

Answer 1

使用ngModelChange事件并创建一个函数来强制转换数据。

例如，检查链接。 使用* ngIf显示隐藏字段

Answer 2

您使用true和false作为字符串。 您可以将测试更改为ngIf。

喜欢

<select [(ngModel)]="foo">
  <option [ngValue]="true">true</option>
  <option [ngValue]="false">false</option>
</select>
<input *ngIf="foo == true"/>

要定义默认值，您可以将foo的值设置为类似

public foo = true;

Answer 3

根据您共享的代码，选择菜单的值绑定到组件的booleanVariable属性。 您的*ngIf查询另一个属性，因此条件错误。 您应该在条件中检查booleanVariable 。

Answer 4

几个小时前，我也发生了类似的事情。 问题是

<option value="false">No</option> <option value="true">Yes</option>错误。 我解决了

<option [value]="false">No</option> <option [value]="true">Yes</option>

那是因为否则Angular不会“分析”选项的值，而是将其识别为字符串。