Angular 5中value和ngValue的区别

Question

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

我进行了如下测试：

https://stackblitz.com/edit/angular-rjrspr？ file = app％2Fapp.component.html

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

我认为使用 value 是针对响应式表单而设计的，而 ngValue 是针对基于模板的表单。 我想知道在我的表单中同时使用两者是否安全（我总是使用响应式表单），并且是否有任何解释不同的行为。

谢谢！

- Fel

---

值始终是一个字符串，ngValue可以是一个对象或任何其他类型。 - Eliseo

因此，考虑到这种差异，我认为在响应式表单中使用value或ngValue是可以的，对吗？ - Fel

Answer 1

可以使用value或ngValue。

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

- Miran Parkar

---

谢谢，我从angular.io/api/forms/NgSelectOption文档中找到了这个。+1 - Omar Isaid

Answer 2

常量项 = ["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

- Ryan Efendy

Answer 3

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

- Ira

Answer 4

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

唯一的区别是，

当您有字符串作为输入时，请使用value，并且

当您有对象作为输入时，请使用ngValue。

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

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

- Deva

Answer 5

value 必须是字符串类型，但ngValue可以是任何类型。如果值的类型不是字符串而是整数，则该值将无法绑定到选择列表。

- Abdus Salam Azad