更新表单下拉列表的角度设置值答案

【问题标题】：Angular setvalue for the update form dropdown更新表单下拉列表的角度设置值
【发布时间】：2020-06-25 06:38:17
【问题描述】：

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

我有两个表 Region 和 Country

我使用 Region Id 值作为 country 表 Region 字段

中的外键值

我从我的 webapi 中获取值，如下所示

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>

当我单击更新按钮时，它会为所有字段设置值，

但我想在下拉列表中显示我所在地区的代码和描述值 在此先感谢帮助我解决此问题的人...

【问题讨论】：

标签： asp.net angular entity-framework asp.net-core angular-material

【解决方案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>

【讨论】：