angular6中编辑表单的预选选项（下拉）

Question

我在我的站点中为添加类别创建了一个编辑表单。

我需要在进入编辑页面时为下拉菜单选择类别值。

1 - 我将请求发送到服务器以获取详细信息：

  public GetCatDetail(id:number){
    this.catService.GetCatDetail(id).subscribe((data)=>{
    this.cat=data,
    this.editCatFG.setValue({
      pFaName:[data.pFaName],
      pEnName:[data.pEnName],
      subCat:[data.subCat]
    }),
    this.selectedCat=data.subCat
  })
  }

2- 向服务器发送请求以获取类别列表以填充下拉列表。

 public GetAllCat(){
  this.catService.GetAllCatList().subscribe((data)=>{
  this.cats=data
  })
 }

3- 我用 html 填充下拉列表：

    <select style="margin-right: 105px;" name="roleLevel" formControlName="subCat" [(ngModel)]="selectedCat">
                    <option  selected>    دسته اصلی </option>
                    <option *ngFor="let cat of cats" selectedCat="cat.id" [value]="cat.id" >{{cat.pFaName}}</option>
     </select>

我现在需要为数据库中的类别选择存在的值并在下拉列表中选择该值。

我该怎么做？

Answer 1

当用于options 列表的数组包含复杂对象而不仅仅是string 或number，则需要使用ngValue。 试试这个：

更新：添加compareWith以选择默认值

<select style="margin-right: 105px;" name="roleLevel" formControlName="subCat" [(ngModel)]="selectedCat" [compareWith]="compareById">
                    <option *ngFor="let cat of cats"  [ngValue]="cat" >{{cat.pFaName}}</option>
     </select>

在您的组件中：

compareById(o1, o2) {
    return o1.id === o2.id
  }

如果cat.id = 0 不是来自服务，您可以像这样将它添加到数组中：

public GetAllCat(){
  this.catService.GetAllCatList().subscribe((data)=>{
  this.cats=data
  //adding the value for id=0;
  this.cats.push({id:0, pFaName: '    دسته اصلی '});
  })
 }