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 事件并创建一个函数来强制转换数据。

例如，检查链接。 Show Hide Field using *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不会“分析”选项的值，而是将其识别为字符串。

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

4 个答案: