Angular 5中值和ngValue之间的差异

Question

今天我意识到Angular 5中反应形式的意外(对我来说)行为.服务器从应用程序接收一个值为"null"而不是null值的字符串,这就是我想要的.

我做了以下测试:

正如您在下图中所看到的,如果我[value]="null"在select中使用,该字段将获得"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

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

Answer 4

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

唯一的区别是，

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

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

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

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