更新表單下拉菜單的角度設置值

Question

在這里...我正在使用 angular(v.9) 和 asp .net core webapi 進行 crud 操作

我有兩張表Region和Country

我使用Region Id值作為國家表Region字段中的外鍵值

我從我的 webapi 獲取值，如下所示

網絡接口

[{
"Id":1,
"Code":"in",
"Description":"india"
,"Active":false,
"RegionId":1,
"region":{"Id":1,"Code":"asia","Description":"asia","Active":false}
}]

我在 service.ts 中的FormGroup

form: FormGroup = new FormGroup({
    Id: new FormControl(0),
    RegionId: new FormControl(0, Validators.required),
    Code: new FormControl('', [Validators.required, Validators.pattern(this.pattern)]),
    Description: new FormControl('', [Validators.required, Validators.pattern(this.pattern)]),
    Active: new FormControl(true)
  });

我的角度更新功能

onEdit(Id) {
    this.service.getCountryById(Id).subscribe((country: country)=> {
      this.service.countryform.controls['Id'].setValue(country.Id,{onlysef:true});

      this.service.countryform.controls['RegionId'].setValue(country.RegionId,{onlysef:true});
    this.service.countryform.controls['Code'].setValue(country.Code,{onlysef:true});
    this.service.countryform.controls['Description'].setValue(country.Description,{onlysef:true})
    this.service.countryform.controls['Active'].setValue(country.Active,{onlysef:true}),
    console.log(country);});

    const dialogconfig = new MatDialogConfig();
    dialogconfig.disableClose = true;
    dialogconfig.autoFocus = true;
    dialogconfig.width = '400px';
    this.dialog.open(CountryDetailsComponent, dialogconfig).afterClosed().subscribe(() => {
      this.service.getCountry().subscribe(country =>{
        this.countryarray = country;
        console.log(this.countryarray);
        this.listdata = new MatTableDataSource(this.countryarray);
        this.listdata.sort = this.sort;
        this.listdata.paginator = this.paginator;
        });
    });
  }

下拉菜單的html代碼

<mat-form-field>
                     <mat-select formControlName="RegionId" placeholder="Region">

                        <mat-option   value="">
                           None
                        </mat-option>
                        <ng-container  *ngFor = "let reg of Rservice.array" >
                            <mat-option  *ngIf="reg.Active != false" value ="{{reg.Id}}" tabindex="2">{{reg.Code}}-{{reg.Description}}</mat-option>
                        </ng-container>

                    </mat-select>
                    <mat-error *ngIf="service.countryform.controls['RegionId'].errors?.required">Field should not be empty</mat-error>
                </mat-form-field>
                <mat-form-field>

當我單擊更新按鈕時，它會為所有字段設置值，

但我想在下拉列表中顯示我的區域代碼和描述值，提前感謝幫助我解決這個問題的人...

Answer 1

由於您在 mat-options 中使用插值。 它將一個值綁定到屬性，並且值將被字符串化。 使用屬性綁定語法來綁定值。

嘗試這個：

  <mat-select formControlName="RegionId" placeholder="Region">
  <mat-option value="">
    None
  </mat-option>
  <ng-container *ngFor="let reg of Rservice.array">
    <mat-option *ngIf="reg.Active != false" [value]="reg.Id" tabindex="2">{{ reg.Code }}-{{ reg.Description }}</mat-option>
  </ng-container>
</mat-select>