我正在构建一个应用程序,我在其中构建了一个输入组件,可以适应和文本输入,选择,文本区域等...
所以我为此创建了一个模型,在那里我发送了它所需的所有信息,因此组件可以适应我的需要 . 我也使用formCOntrol而不是表单的ngModel(在阅读了一些最好的选项之后)
我遇到的问题是我无法预先选择ng-select的值(之前我使用的是选择组件,它正在播种 .
所以在创建表单中,我有20个不同类型的输入,一切都很好...当我尝试执行某些操作的编辑操作时出现问题,因为我需要预先填充原始值的所有输入 . 对于所有组件都可以,因为我与我想要更新的实体的模型共享formControlName,但是对于ng2-select我得到以下错误:
ERROR TypeError: selectedItems.map is not a function
我搜索了可能的解决方案,但没有一个对我有用..也许因为我在另一个组件中使用ng-select ....
所以这是我的代码 . 这是路线:
ngOnInit() {
this.supplierService.get(this.item.id).subscribe( (response : JsonResponse)=> {
if(response.success){
this.item = response.data;
this.item.logo = this.supplierService.getImage(this.item);
this.getState();
}
else{
this.error = response.code;
}
});
如您所见,首先我得到项目(要编辑的对象) . 然后我得到状态(将在ng-select中显示为选项的项目
在我获得状态后,我创建了formControl:
this.form = new FormGroup({
name: new FormControl(this.item.name,Validators.required),
last_name: new FormControl(this.item.last_name, Validators.required),
fantasy_name: new FormControl(this.item.fantasy_name, Validators.required),
real_name: new FormControl(this.item.real_name, Validators.required),
state: new FormControl(this.item.state ? this.item.state : '', Validators.required),
city: new FormControl(this.item.city ? this.item.city : '', Validators.required),
phone: new FormControl(this.item.phone),
fax: new FormControl(this.item.fax),
discount: new FormControl(this.item.discount),
address: new FormControl(this.item.address),
apartment: new FormControl(this.item.apartment),
cuit: new FormControl(this.item.cuit, Validators.required),
email: new FormControl(this.item.email, Validators.required),
floor: new FormControl(this.item.floor),
mobile_phone : new FormControl(this.item.mobile_phone)
});
最后,我为每个输入创建组件,这里有状态示例:
let state : InputForm = new InputForm();
state.setSelect("state", 'COMPONENT.COMMON.STATE', this.states, 6);
this.formElement.elements.push(state);
在那里我设置这个组件将是一个选择,我第一个参数是formControlName中的名称(这样,它知道哪个是formCOntrolName所以它可以将此值设置为默认值或在提交时分配新值 . 然后,标签,然后是要显示的项目列表 . (最后一个参数是输入的大小) .
这是我的组件对应于select的模板:
<ng-select *ngIf="element.type == 'select' && (element.items && element.items.length > 0)" (typed)="typed(element.id, $event)" formControlName="{{element.id}}" [allowClear]="true" [items]="element.items" (selected)="change(element.id, $event)" id="{{element.id}}" (removed)="removed($event)" (typed)="typed($event)" placeholder="{{element.placeholder | translate}}"></ng-select>
我试过[active],[data],[initData],但没有任何作用 . 我总是得到错误
ERROR TypeError: selectedItems.map is not a function
我不知道我是否应该以其他方式分配默认值 . 错误符合
this._active = selectedItems.map(function (item)
在这种情况下,selectedItems是状态类型(我的自定义类型)我不知道我是否应该在此之前进行转换 . 该类型具有id和文本值 .
总之,错误只是在“编辑”动作中 . 我的意思是,当元素具有预先选择的值时,如果不是,它可以正常工作 .
我正在使用棱角4.3.3
请参阅失败行的下图:
在那里你可以看到对象被发送,并且map函数也是未定义的 .
1 回答
您收到错误,因为
selecteItems
不是数组 .在你的代码中
您需要将
state
定义更改为:将项目设置为数组将删除错误并允许您使用
map
进行迭代 .