Angular 10在编辑组件的下拉列表中设置选中的选项值

Question

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

id: number;
userForm: FormGroup;
Charity: Charities;
Charities: Charities[];
users: Users[];
Cities: City[];
Categories: Category[];
selected: any;
Regions: Region[];
constructor(private activateRoute: ActivatedRoute,private route: Router,private fb : FormBuilder, private CharityService : CharityService,private toastr: ToastrService , private RegisterService : AccountService, private router : ActivatedRoute) { }
ngOnInit(): void {
var userId = this.router.snapshot.params['id'];
this.setForm(userId);
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.users = [];
}
get editFormData() { return this.userForm.controls; }

private setForm(id:number) {
this.CharityService.GetCharit(id).then(x => {
this.Charity = x;
this.userForm = this.fb.group({
id: [this.Charity.id, [Validators.required]],
name: [this.Charity.name, [Validators.required]],
phone: [this.Charity.phone, [Validators.required]],
SubCategoryId: [this.Charity.SubCategoryId, [Validators.required]],
RegionId: [this.Charity.RegionId, [Validators.required]],
CityId: [this.Charity.CityId, [Validators.required]],  
Category:[this.Charity.Category, [Validators.required]],
});
});
}

这是edit.component.html

例如formControlName="SubCategoryId">

<select class="custom-select" [(ngModel)]="Categories" formControlName="SubCategoryId" [ngClass]="{'is-invalid' :!this.userForm.get('SubCategoryId').valid && this.userForm.get('SubCategoryId').touched}" [(value)]="selected" required>
<option selected value="" disabled class="dove">اختر التصنيف</option>
<option *ngFor="let cat of Categories" [value]="cat.id">{{cat.subCategoryName}}</option>
</select>

有谁能帮我一下吗

Answer 1

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

<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>

Answer 2

您可以通过以下方式为ts文件中的下拉菜单设置所选择的选项值:

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

感谢

Answer 3

您面临的问题是，当您绑定控件值时，查找列表仍然没有从服务器加载。为了证明这一点，首先你必须用虚拟数据填充你的列表，例如this.Categories = [1,2,3].

解决方法很简单:

把你的ngOnInit变成async功能和await里面需要的服务，然后你可以修补表单值

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()并行执行，如果你需要一个接一个地执行，你可以为每个服务调用使用await，希望这能解决你的问题。

还有一件事，更好的方法是初始化表单一次，并且补丁值:

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