Angular 5 中 value 和 ngValue 之间的差异

Question

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

我做了以下测试：

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

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

谢谢！

Answer 1

可以使用value或ngValue。

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

Answer 2

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

Answer 3

value 和 ngValue 之间没有太大区别。

唯一不同的是，

当你有 String 作为输入时，然后使用 value 和

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

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

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

Answer 4

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

Answer 5

当您需要绑定到对象集合中的对象而不是选项元素显示的字符串时，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 是上面的颜色对象之一。

Differences between value and ngValue in Angular 5