前言

在最近的項目中，需要用到 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>

現(xiàn)在看來是我們想要的數(shù)據(jù)?。?！

在次發(fā)送請求，狀態(tài)碼 200 成功

數(shù)據(jù)也是正確的！！沒有問題！！

總結

感覺之前還是太依賴于框架，沒有深究 Value 與 ngValue 有什么不同，框架里用 Value 就直接復制過去，框架都是封裝好的，導致現(xiàn)在自己用到了，不知道怎么寫的了。

用框架也有好處，既方便又省時間，什么都是現(xiàn)成的。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論