Angular（6）表单在http get后select中选择所选项目

Question

我想在表单选择中选择一个选项，但我没有找到方法。

我在网络上检查了许多类似的问题，但没有找到一种方法使解决方案适应我的代码。

这里是视图：

        <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>

使用此代码，列表allSalleEtb 的第一项被选中，但它应该是另一个。

如果我不使用此 `[value]="selectedSalle"，则不会选择任何内容并且选择为空白。

我从以下位置获得“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 获取请求接收信息：

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

Answer 1

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