value與ngValue如何在Angular中使用

今天就跟大家聊聊有關value與ngValue如何在Angular中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

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>

問題

在發送請求時，向后臺發送 Post 請求時發生錯誤,并提示狀態碼為 400

出現 400

的狀態碼的錯誤一般有兩種：

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

2、請求參數有誤。

在看一下向后臺發送數據為 [Object Object]

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

原因

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

在控制臺打印，發現傳過去的 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>

現在看來是我們想要的數據?。?！

在次發送請求，狀態碼 200 成功

看完上述內容，你們對value與ngValue如何在Angular中使用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。