value與ngValue如何在Angular中使用

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

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ù)?。?！

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

看完上述內(nèi)容，你們對(duì)value與ngValue如何在Angular中使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。