Question

在表单中，我具有以下控件：

<select class="form-control" [(ngModel)] ="flightChoice.twoWays" id="twoWays" formControlName="TwoWays">
    <option value="false" >one way</option>
    <option value="true">two ways</option>
</select>

然后我有以下div：

<div *ngIf="flightChoice.twoWays">
    <label for="returnDate">Return Date:</label>
    <br />
    <input class="form-control" formControlName="ReturnDate" type="text" id="returnDate" />
    <br />
</div>

当我将Select控件的值更改为“两种方式”时，我希望div出现。因此正确地做到了。但是，当我改回“单向”时，div应该消失，但事实并非如此。关于如何使其正常工作的任何提示？

Answer 1

尝试一下：

  <div *ngIf="flightChoice.twoWays=== 'true'"></div>

Answer 2

字符串'true'和'false'均为truthy（实际上，所有非空字符串都是真实的）。因此，您的工作流程如下所示：

flightChoice.twoWays开始持有虚假值（我不知道您的情况是什么-可能是false，undefined，null等）。这意味着您的div最初不会显示。
您可以在UI中选择“两种方式”，将flightChoice.twoWays更改为'true'（字符串）。由于这是一个真实值，因此会在屏幕上显示div。
您在用户界面中选择“单向”，这会将flightChoice.twoWays更改为'false'（再次是字符串）。请记住，这仍然是一个真实值，因为它是一个非空字符串，因此您的div仍然显示在屏幕上。

您有两个解决方案-第一个已经在another answer中指出，但是迫使您在假定的类型安全的TypeScript代码中使用字符串。

如果要存储布尔值true和false而不是字符串'true'和'false'，则可以使用Angular的[ngValue]语法，允许您指定文字值（例如，布尔值true和false）而不是它们的字符串表示形式。看起来像这样：

<select class="form-control" [(ngModel)] ="flightChoice.twoWays" id="twoWays" formControlName="TwoWays">
    <option [ngValue]="false" >one way</option>
    <option [ngValue]="true">two ways</option>
</select>

如您所见，这就像将option的{{1}}更改为value="true"]一样简单。进行此更改后，[ngValue="true"将设置为布尔值，并允许您保持flightChoice.twoWays指令不变，从而避免了在布尔值更合适的情况下使用字符串的需求。

角度绑定无法正常工作

2 个答案: