根据后端返回的数据添加 FormControl，但在 Angular 应用程序中出现两个不同的错误 [英] Add FormControl accroding to the data returned from backend but got two different error in Angular app

问题描述

这是我的 Angular 应用的页面之一.

在 ngOnInit 方法中，我调用 api 两次以获取我需要的不同数据，并使用 forEach 方法循环数据以构建反应式表单，但不知何故，我遇到了两种不同的错误之一.

这个

在此处输入图片说明

还有这个

在此处输入图片描述

有时根本没有错误.

如果有人能告诉我我的代码有什么问题，我们将不胜感激.

这是我的代码的一部分

user-manager.component.ts

导出类 UserManagerComponent 实现 OnInit {构造函数(私人 fb:FormBuilder) {}ngOnInit(): 无效 {this.commonData.getDropdownData('menus').pipe(takeWhile(() => this.alive)).订阅(r => {如果(r.status === 0){this.menuForm = this.fb.group({});this.menuList = r.result.menus;this.menuList.forEach(i => {const control = new FormControl();(this.menuForm as FormGroup).setControl(i.MenuId, control);i.children.forEach(a => {const con = new FormControl();(this.menuForm as FormGroup).setControl(a.MenuId, con);});});this.isMenuFormReady = true;} 别的 {this.toastrService.danger(r.message);}},错误 =>{如果(！环境.生产){this.menuForm = this.fb.group({});this.menuList = menuMock.menus;this.menuList.forEach(i => {const control = new FormControl();(this.menuForm as FormGroup).setControl(i.MenuId, control);i.children.forEach(a => {const con = new FormControl();(this.menuForm as FormGroup).setControl(a.MenuId, con);});});this.isMenuFormReady = true;}控制台日志(错误)；});this.commonData.getDropdownData('权限').pipe(takeWhile(() => this.alive)).订阅(r => {如果(r.status === 0){this.permissionsForm = this.fb.group({});this.permissionsList = r.result;this.permissionsList = this.groupBy(this.permissionsList, function(item) {返回 [item.GroupId];});this.permissionsList.forEach(i => {const id = i[0].GroupId;this.permissionsForm.addControl(id, this.fb.group({}));i.forEach(a => {const con = new FormControl();(this.permissionsForm.get(id) as FormGroup).addControl(a.ActionId, con);});});this.isPermissionFormReady = true;} 别的 {this.toastrService.danger(r.message);}},错误 =>{如果(！环境.生产){this.permissionsForm = this.fb.group({});this.permissionsList = userMock.Permission;this.permissionsList = this.groupBy(this.permissionsList, function(item) {返回 [item.GroupId];});this.permissionsList.forEach(i => {const id = i[0].GroupId;//console.log('id: ', id)this.permissionsForm.addControl(id, this.fb.group({}));i.forEach(a => {const con = new FormControl();(this.permissionsForm.get(id) as FormGroup).addControl(a.ActionId, con);});});this.isPermissionFormReady = true;//console.log(this.permissionsForm);}控制台日志(错误)；});}groupBy( 数组, f ) {常量组 = {};array.forEach(函数(o){const group = JSON.stringify( f(o) );组[组] = 组[组] ||[];组[组].push(o);});返回 Object.keys(groups).map(function(group){返回组[组];});}}

user-manager.component.html

 <nb-card-header>表格1</nb-card-header><nb-card-body><form [formGroup]="permissionsForm" autocomplete="off" *ngIf="isPermissionFormReady"><nb-card *ngFor="let item of permissionsList; let i = index;"[formGroupName]="i"><nb-card-header>{{item[0].GroupName}}</nb-card-header><nb-card-body class="pt-0"><div class="row"><div class="col-4 my-1" *ngFor="让项目的权限"><标签><input type="checkbox" [formControlName]="permission.ActionId"/>{{permission.ActionName}}

</nb-card-body></nb-card></表单></nb-card-body></nb-card><nb卡><nb-card-header>表格2</nb-card-header><nb-card-body><form [formGroup]="menuForm" autocomplete="off" *ngIf="isMenuFormReady"><div class="row"><div class="col-4" *ngFor="let menu of menuList" ><nb卡><nb-card-header><标签><input type="checkbox" id="{{menu.MenuId}}" [formControlName]="menu.MenuId" (change)="menuClick($event)"/>{{menu.title}}</nb-card-header><nb-card-body class="pt-0"><div class="row"><div class="col-12 my-1" *ngFor="let item of menu.children"><标签><input type="checkbox" id="{{item.MenuId}}" [formControlName]="item.MenuId" (change)="menuClick($event)"/>{{item.title}}

</nb-card-body></nb-card>