角度绑定无法正常工作答案

【问题标题】：Angular binding does not work properly角度绑定无法正常工作
【发布时间】：2018-06-30 08:20:53
【问题描述】：

在表单中我有以下控制：

<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 应该会消失，但不会。关于如何使其正常工作的任何提示？

【问题讨论】：

标签： angular binding

【解决方案1】：

试试这个：

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

【讨论】：

谢谢，我认为 === 'true' 是隐含的
@user1238784 在这种情况下，它将 flightChoice 与字符串 "true" 进行比较，而不是布尔值，这就是它不是隐式的原因
@user1238784 您正在比较字符串而不是布尔值。有帮助就采纳

【解决方案2】：

字符串'true' 和'false' 都是truthy（实际上，所有非空字符串都是真值）。因此，您的工作流程有点像这样：

flightChoice.twoWays 开始持有一个虚假值（我不知道你的情况是什么 - 它可能是 false、undefined、null 等）。这意味着您的div 最初没有显示。
您在 UI 中选择“两种方式”，这会将 flightChoice.twoWays 更改为 'true'（字符串）。由于这是一个真实值，它会导致 div 显示在屏幕上。
您在 UI 中选择“一种方式”，这会将 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 的value="true" 更改为[ngValue="true" 一样简单。通过此更改，flightChoice.twoWays 将设置为布尔值，并允许您保持 ngIf 指令不变，避免在更适合布尔值的情况下使用字符串。

【讨论】：