首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular (6)表单在http get之后选择select中的选定项

Angular (6)表单在http get之后选择select中的选定项
EN

Stack Overflow用户
提问于 2018-06-09 22:24:51
回答 1查看 3.9K关注 0票数 0

我想在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",所以我把它放回去了。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50775258

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档