如何使用子組件在ng2中選擇默認選項

Question

我正在構建一個應用程序，其中構建了一個輸入組件，該組件可以適應於文本輸入，選擇，文本區域等。

因此，我為此創建了一個模型，在其中發送所需的所有信息，以便組件可以適應我的需要。 我還在表單上使用formCOntrol而不是ngModel（在閱讀了一些最好的頁面之后）

我遇到的問題是，我無法為ng-select預先選擇一個值（以前我使用的是select組件，這太好了。

因此，在創建表單中，我喜歡20種不同類型的輸入，並且一切都很好...當我嘗試執行某項的Edit操作時，會出現問題，因為我需要所有輸入都預先填充原始值。 對於所有組件都可以，因為我與要更新的實體模型共享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，因此可以將該值設置為默認值或在Submit上分配新值。標簽，然后是要顯示的項目列表（最后一個參數是輸入的大小）。

這是我的組件對應於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>

我嘗試使用[活動]，[數據]，[initData]，但沒有任何效果。 我總是得到錯誤

ERROR TypeError: selectedItems.map is not a function

我不知道是否應該以其他方式分配默認值。錯誤在一行

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

在這種情況下，selectedItems是State類型（我的自定義類型），我不知道是否應該在此之前進行轉換。 該類型具有ID和文本值。

總而言之，該錯誤僅發生在“編輯”操作中。我的意思是，當元素具有一個預先選擇的值時，如果沒有，它就可以正常工作。

我正在使用角度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進行迭代。