Angular значение для выпадающего списка формы обновления

Question

здесь, там ... я использую angular (v.9) и asp. net core webapi для выполнения грубых операций

у меня есть две таблицы Регион и Страна

Я использовал Идентификатор региона Значение в качестве значения внешнего ключа в Страна Таблица Регион Поле

я получаю значение из моего webapi, как указано ниже

webapi

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

my FormGroup в service.ts

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)
  });

моя функция обновления в angular

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>