Angular value與ngValue區(qū)別詳解

更新時間：2019年11月27日 15:31:10 作者：潘佳琦

這篇文章主要介紹了Angular value與ngValue區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

在最近的項目中，需要用到 select 組件，之前 Angular 前臺都是用現(xiàn)有的封裝好的框架，一般都是從 Ctrl+c 到 Ctrl+v 的操作然后改一下就可以用，最近使用的 Bootstrap 原生樣式，所以一切都得自己寫，但是這樣也有好處的，不會受框架的局限性。

組件

ts部分代碼：

input 輸入， output 輸出

@Input()
 set college(value: College) {
  this.innerCollege = value;
 }

 get college(): College {
  return this.innerCollege;
 }

 private innerCollege: College;

 @Output()
 collegeSelect: EventEmitter<College> = new EventEmitter();
 
 .........
 
  public change(college: College): void {
  this.collegeSelect.emit(college);
 }

Html：

<select [compareWith]="comparedWithId" class="form-control" [(ngModel)]="college" (change)="change(college)">
 <option value="-1" >請選擇學院...</option>
 <option *ngFor="let _college of colleges" [value]="_college">{{_college.name}}</option>
</select>

問題

在發(fā)送請求時，向后臺發(fā)送 Post 請求時發(fā)生錯誤,并提示狀態(tài)碼為 400

出現(xiàn) 400

的狀態(tài)碼的錯誤一般有兩種：

1、語義有誤，當前請求無法被服務器理解。除非進行修改，否則客戶端不應該重復提交這個請求。

2、請求參數(shù)有誤。

在看一下向后臺發(fā)送數(shù)據(jù)為 [Object Object]

很明顯我們這就是第二種請求參數(shù)錯誤，應該是傳過去一個 College 對象，而我們傳過去了一個 [Object Object]

原因

為什么會出現(xiàn)這個原因呢，在大家看來 [Object Object] 是不是也是一個對象？

在控制臺打印，發(fā)現(xiàn)傳過去的 College 就是 [Object Object]

為什么會這樣顯示呢，感覺怪怪的，不是應該顯示 JSON 格式的對象么？

google 一下問題迎刃而解，在 stackoverflow 有詳細的解釋

[value]="..." 僅支持字符串值
[ngValue]="..." 支持任何類型

所以 value 僅支持串字符串，不支持傳對象，如果使用 value 傳對象，然而不會得到正確的解析，就得到了我們看到的 [Object Object]

修改為ngValue

<select [compareWith]="comparedWithId" class="form-control" [(ngModel)]="college" (change)="change(college)">
 <option value="-1" >請選擇學院...</option>
 <option *ngFor="let _college of colleges" [ngValue]="_college">{{_college.name}}</option>
</select>

控制臺打?。?/p>