如何使用子组件 select ng2 中的默认选项

Question

我正在构建一个应用程序，我在其中构建了一个可以适应文本输入的输入组件、select、文本区域等...

所以我为此创建了一个模型，我在其中发送它需要的所有信息，以便组件可以适应我的需要。我也在使用 formCOntrol 而不是 ngModel 作为表单（在阅读了一些被认为是最佳选择的页面之后）

我遇到的问题是我无法为 ng-select 预select 一个值（之前我使用的是 select 组件，但效果很好。

所以在创建表单中，我有 20 个不同类型的输入，一切都很好...当我尝试对某些内容执行编辑操作时出现问题，因为我需要预先填充所有输入原始值。对于所有组件都没有问题，因为我正在与要更新的实体模型共享 formControlName，但是对于 ng2-select 我收到以下错误：

ERROR TypeError: selectedItems.map is not a function

我用谷歌搜索了可能的解决方案，但 none 对我有用。可能因为我在另一个组件中使用 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);

我设置这个组件将是一个 select，我的第一个参数是 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

我不知道我是否应该在其他 way.The 中分配默认值错误在第

行

this._active = selectedItems.map(function (item)

在那种情况下，selectedItems 是状态类型（我的自定义类型）我不知道是否应该在此之前进行转换。该类型有 id 和文本值。

总而言之，错误仅出现在 "edit" 操作中。我的意思是，当元素具有预 select 值时，如果没有，则工作正常。

我正在使用 angular 4.3.3

从失败的行中查看下图：

可以看到对象已经发送，而且map函数未定义

Answer 1

您遇到错误，因为 selecteItems 不是数组。

在你的代码中

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

您需要将 state 定义更改为：

state: new FormControl(this.item.state ? [this.item.state] : '', Validators.required)

将项目设置为数组将消除错误并允许您使用 map.

进行迭代

如何使用子组件 select ng2 中的默认选项

How to select a default option in ng2 using child component

javascript

angular-ngselect

angular2-forms

angular