Asp.net 角度10设置“编辑组件”下拉列表中的选定选项值

在angular和asp.net应用程序中，我的组件中有一个编辑表单，在下拉列表中有多个选择选项，其中除下拉列表字段外，编辑表单中显示的所有数据都显示为空，所有下拉列表值都不是以前存储的下拉列表值。 因此，当我转到edit.component.html中的编辑表单时，我需要在下拉列表中设置所选选项值。 这是我的edit.component.ts

id:number；
userForm:FormGroup；
慈善机构：慈善机构；
慈善机构：慈善机构[]；
用户：用户[]；
城市：城市[]；
类别:类别【】;；
选择：任何；
区域：区域[]；
构造函数（私有activateRoute:ActivatedRoute，私有路由：Router，私有fb:FormBuilder，私有CharityService:CharityService，私有toastr:ToastrService，私有RegisterService:AccountService，私有路由器：ActivatedRoute）{}
ngOnInit（）：void{
var userId=this.router.snapshot.params['id']；
这个.setForm（userId）；
this.CharityService.GetAllCategories（）。然后（res=>this.Categories=res as Category[]）
this.CharityService.GetAllRegions（）。然后（res=>this.Regions=res as Region[]）
this.CharityService.GetAllUsers（）.then（res=>this.users=res as users[]）；
this.users=[]；
}
get-editFormData（）{返回this.userForm.controls；}
私有集合表单（id:编号）{
this.CharityService.GetCharit（id）.then（x=>{
这个。慈善=x；
this.userForm=this.fb.group({
id:[this.Charity.id，[Validators.required]]，
名称：[this.Charity.name，[Validators.required]]，
电话：[this.Charity.phone，[Validators.required]]，
子类别ID:[this.Charity.subcategorid，[Validators.required]]，
RegionId:[this.Charity.RegionId，[Validators.required]]，
CityId:[this.Charity.CityId，[Validators.required]]，
类别：[this.Charity.Category，[Validators.required]]，
});
});
}

试试这样的东西，它对我很有用

<select class="custom-select mr-sm-2" id="SubCategoryId" #SubCategory formControlName="SubCategoryId">
   <option *ngFor="let cat of Categories; let i = index" [ngValue]="cat.id">
       {{cat.value}}
   </option>             
 </select>

{{cat.value}}

您可以通过以下方式为ts文件中的下拉列表设置所选选项值：

this.userForm.controls.get('SubCategoryId').setValue('' + this.Charity.SubCategoryId + '');

---

谢谢

您所面临的问题，在绑定控件值时，您的查找列表仍然没有从服务器加载。 为了证明这一点，首先你必须用虚拟数据填充你的列表，例如

this.Categories=[1,2,3]

解决方法非常简单：

将您的ngOnInit转到

async

函数，并在其内部等待所需的服务，然后您可以修补表单值

async ngOnInit(): void {
        const userId = this.router.snapshot.params['id'];
        await Promise.all([
            this.CharityService.GetAllCategories().then(res => this.Categories = res as Category[]),
            this.CharityService.GetAllRegions().then(res => this.Regions = res as Region[]),
            this.CharityService.GetAllUsers().then(res => this.users = res as Users[])
        ]);

        this.setForm(userId);
        this.users = [];
    }

另外，我使用了

Promise.all（）

仅用于并行执行，如果需要逐个执行，您可以使用wait for每个服务调用，希望这能解决您的问题

还有一件事，一个更好的方法是启动表单一次，补丁值为：

private _initForm(){
    this.userForm = this.fb.group({
        id: ['', [Validators.required]],
        name: ['', [Validators.required]],
        phone: ['', [Validators.required]],
        SubCategoryId: ['', [Validators.required]],
        RegionId: ['', [Validators.required]],
       CityId: ['', [Validators.required]],  
       Category:['', [Validators.required]],
  });

}

然后在你的

ngOnInit中调用它

async ngOnInit(): void {
    _initForm();
    //rest of code
}

然后，在
setForm
函数中，只需按如下方式修补值：

this.userForm.patchValue（{id:newValue}）
不适用于mei获取此错误：-错误类型错误：无法读取EditCharityComponent上未定义的属性“controls”。ngOnInit@MostafaGamal，在控制之后，已创建，并且已绑定下拉列表的值，然后设置这些下拉列表的选定值。放置调试器并检查userForm是否有控件，或者删除控件并使用get this.userForm.get（'SubCategoryId'）获取此错误：-此表达式不可调用。类型“AbstractControl”没有调用签名。ts（2349）不适用于meNot适用于您吗？我真的很抱歉花了这么多时间回答你的问题，祝你好运，兄弟。谢谢你抽出时间