前言

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

組件

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" >請(qǐng)選擇學(xué)院...</option>
 <option *ngFor="let _college of colleges" [value]="_college">{{_college.name}}</option>
</select>

問(wèn)題

在發(fā)送請(qǐng)求時(shí)，向后臺(tái)發(fā)送 Post 請(qǐng)求時(shí)發(fā)生錯(cuò)誤,并提示狀態(tài)碼為 400

出現(xiàn) 400

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

1、語(yǔ)義有誤，當(dāng)前請(qǐng)求無(wú)法被 服務(wù)器 理解。除非進(jìn)行修改，否則客戶端不應(yīng)該重復(fù)提交這個(gè)請(qǐng)求。

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

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

很明顯我們這就是第二種請(qǐng)求參數(shù)錯(cuò)誤，應(yīng)該是傳過(guò)去一個(gè) College 對(duì)象，而我們傳過(guò)去了一個(gè) [Object Object]

原因

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

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

為什么會(huì)這樣顯示呢，感覺(jué)怪怪的，不是應(yīng)該顯示 JSON 格式的對(duì)象么？

google 一下問(wèn)題迎刃而解，在 stackoverflow 有詳細(xì)的解釋

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

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

修改為ngValue

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

控制臺(tái)打?。?/p>

現(xiàn)在看來(lái)是我們想要的數(shù)據(jù)！?。?/p>

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

數(shù)據(jù)也是正確的！！沒(méi)有問(wèn)題??！

總結(jié)

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論