Angular 5 中 value 和 ngValue 的区别答案

【问题标题】：Differences between value and ngValue in Angular 5Angular 5 中 value 和 ngValue 的区别
【发布时间】：2018-09-29 19:35:12
【问题描述】：

今天我意识到 Angular 5 中反应式表单的意外（对我而言）行为。服务器从应用程序接收到一个字符串，其值为“null”而不是 null 值，这正是我想要的。

我做了以下测试：

如下图所示，如果我在选择中使用[value]="null"，则该字段将获得“null”（字符串文字）作为值。但是，如果我使用 [ngValue]="null"，它会得到预期的 null 值。

我认为value 用于响应式表单，而ngValue 用于模板驱动表单。我想知道在我的表单中使用这两种表单是否安全（我总是使用反应式表单），以及是否对不同的行为有任何解释。

谢谢！

【问题讨论】：

【解决方案1】：

value 和 ngValue 没有太大区别。

唯一的区别是，

当您有 String 作为输入时，请使用 value 和

当 Object 作为输入时，然后使用 ngValue。

const colors= ["Red", "Green", "Blue"];

<option *ngFor="let color of colors" [value]="color">
    {{color}}
</option>

【讨论】：

【解决方案2】：

ngValue 在需要绑定到对象集合中的对象而不是选项元素显示的字符串时很有价值，如下所示。

  <select [(ngModel)]='selectedColor'>
    <option *ngFor="let color of colors" [ngValue]="color"  >{{color.name}}</option>
  </select>

在哪里

  colors: [{code:'#FF0000', name:'Red'}, {code:'#00FF00', name:'Green'}, {code:'#0000FF', name:'Blue'}];

selectedColor 是上面的颜色对象之一。

【讨论】：

【解决方案3】：

const items = ["foo", "bar", "baz"]

<option *ngFor="let item of items" [value]="item">
    {{item}}
</option>

使用[value] 选择其中一个选项时，值将为foo、bar、baz

<option *ngFor="let item of items" [ngValue]="item">
    {{item}}
</option>

使用[ngValue] 选择其中一个选项时，值将为0: foo、1: bar、2: baz

【讨论】：

【解决方案4】：

value 必须是字符串，但 ngValue- 是你想要的。如果 value 类型是 int 而不是 string，则 value 不会绑定到 selectlist。

【讨论】：

【解决方案5】：

可以使用value或ngValue。

两者之间的唯一区别是value始终是字符串，其中ngValue可以传递对象

【讨论】：