我想在form 中选择一个选项,但我找不到方法。
我在网上查看了许多类似的问题,但没有找到一种方法来调整解决方案,以适应我的代码。
视图如下所示:
<select class="form-control" #selectedValue name="selectedSalles"
id="selectedSalles" [(ngModel)]="selectedSalle"
(ngModelChange)="addSalleToSelected($event)">
<option *ngFor="let salle of allSalleEtb | async"
[ngValue]="salle" [value]="selectedSalle" >
{{salle.nom}}
</option>
</select>
使用此代码,可以选择list allSalleEtb
的第一个项目,但它应该是另一个。
如果我不使用这个`value="selectedSalle",什么都不会被选中,并且select是空白的。
我从下面获得"salle“对象:
public getSlot(){
this.creneauService.getSlot(this.idEtablissement, this.idCreneau)
.subscribe((data: CourseSlot) => {
this.selectedSalle = data.salle;
}
);
}
有关详细信息,请参阅:
对象"salle“包含"nom”和"id“属性:
salle:Object {idSalle: 2, nom: "110A"}
控制器接收来自httpClient get请求的信息:
getSlot(idEtablissement: number, idCreneau: number){
const url = environment.API_URL + "/etablissement/" + idEtablissement + "/creneaux/" + idCreneau;
return this.httpClient.get(environment.API_URL + "/etablissement/" + idEtablissement + "/creneaux/" + idCreneau);
}
如果有的话,非常感谢你的帮助!
--编辑
当我更改"salle“(ngModelChange)="addSalleToSelected($event)"
的值时,SelectedSalle会被编辑,并用于发布表单:
addSalleToSelected(salle){
this.salle = salle;
this.selectedSalle = salle;
console.log("salle added");
console.log(salle);
}
在我所有的尝试中,我忘记并删除了需要的选项中的[ngValue]="salle"
,所以我把它放回去了。
发布于 2018-06-10 03:44:46
HTML在选项的值中赋值id
,而不是在完整对象中赋值
<select class="form-control" #selectedValue name="selectedSalles"
id="selectedSalles" [(ngModel)]="selectedSalle"
(ngModelChange)="addSalleToSelected($event)">
<option *ngFor="let salle of allSalleEtb" [value]="salle.idSalle"> //==== assign id in value rather than complete object
{{salle.nom}}
</option>
</select>
TS
public getSlot(){
this.creneauService.getSlot(this.idEtablissement, this.idCreneau)
.subscribe((data: CourseSlot) => {
this.allSalleEtb = data.salle; // set all data here
this.selectedSalle = this.allSalleEtb[0].idSalle; // set first as selected
});
}
根据id查找选定对象
addSalleToSelected(value){
this.salle = this.allSalleEtb.find(salle => salle.idSalle == value); // find selected object by finding in original data by ID
}
工作DEMO
https://stackoverflow.com/questions/50775258
复制相似问题