如何在 Angular ng-multiselect-dropdown 中显示预选值

Question

有谁知道为什么我的 selectedItems 在 multiselect- 下拉列表中没有显示为 selected？我在 [data] 和 [(ngModel)] 中传递了相同的数据，因此下拉列表中的所有内容都应显示为 selected，但没有显示为 selected.

下拉-select-modal.component.html

<ng-multiselect-dropdown 
                    [data]="listData"
                    [(ngModel)]="selectedItems"
                    [settings]="settings"
                    (onSelect)="onItemSelect($event)"
                    (onSelectAll)="onSelectAll($event)"
                    (onDeSelect)="onItemDeSelect($event)"
                    formControlName="selectedItems"
                    >
                </ng-multiselect-dropdown>

下拉-select-modal.component.ts

import { Component, Input, ViewChild, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { FormBuilder, FormArray, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  moduleId: module.id,
  selector: 'drop-down-select-modal',
  templateUrl: './drop-down-select-modal.component.html',
  styleUrls: ['./drop-down-select-modal.component.scss']
})
export class DropDownSelectModalComponent implements OnInit {
  @Input() tag: any;
  @Input() mode = '';
  @Input() listData: any;
  @Output() updateCauseOfAnomaly = new EventEmitter();
  @ViewChild('staticModal2') public staticModal2: ModalDirective;
  @ViewChild('adminForm') public adminForm: FormGroup;
  @Input() selectedItems: any;

  tempForm: FormGroup;

  settings = { singleSelection: false,
    idField: 'id',
    textField: 'description',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 10,
    
    classes:"myclass custom-class",
    // allowSearchFilter: true,
    enableCheckAll:false};

copyList = []

  constructor(private fb: FormBuilder) { 
  }

  ngOnInit() {
    this.settings = { singleSelection: false,
      idField: 'id',
      textField: 'description',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 10,
      classes:"myclass custom-class",
      // allowSearchFilter: true,
      enableCheckAll:false};

  }



  public show() {
    this.staticModal2.show();
   
  }

  public ok() {
    this.updateCauseOfAnomaly.next(this.selectedItems);
    this.staticModal2.hide();
    this.adminForm.reset();
  }

  onItemSelect(item: any, role: any) {
    console.log(item);
}

OnItemDeSelect(item: any, role: any) {
  
     console.log(item);
}

onSelectAll(items: any, role: any) {
    console.log(items);
}

onDeSelectAll(items: any, role: any) {
    console.log(items);
}

}

dropdown.component.html

<drop-down-select-modal [tag]='currentTag2' #staticModal2 (updateCauseOfAnomaly)='updateCauseOfAnomaly($event)' [mode]='mode' [listData]='this.causeOfAnomalyFiltered.dropDownValues' [selectedItems]='this.causeOfAnomalyFiltered.dropDownValues'></drop-down-select-modal>

Answer 1

@jonv5629，抱歉我的评论。您需要决定是使用 ReactiveForms（使用 formControlName）还是模板驱动的表单（使用 ngModel）。如果你使用响应式表单和组件，你需要做出另一个决定：在 parent 中创建 FormControl 或在 child 中创建 formControl 并传递一个变量

-当您在 parent 中创建 formControl 时，您在 @Input

中传递 formControl

form=new FormGroup({
  selectedItems:new FormControl()
})

请记住，您可以使用 setValue 或在创建表单时为 FormControl 赋值

this.form.get('selectedItems').setValue([2,3,4])
//or
form=new FormGroup({
  selectedItems:new FormControl([2,3,4])
})

你的parent喜欢

   <app-component [selectedItems]="form.get('selectedItems')">
   </app-component>

还有你的child

   selectedItems:FormControl()
   @Input('selectedItems') set _(value)
   {
       this.selectedItems=value as FormControl //it's necesary "cast"
                                               //as FormControl
   }

   //see that we use `[formControl]`    
   <ng-multiselect-dropdown [formControl]="selectedItems" ...>

如果在 child 中创建 formControl 并传递一个变量，您需要一个 Output 来说明 parent 值正在改变。

有些像 child

 <ng-multiselect-dropdown [formControl]="control" ...>

control=new FormControl()
subscription:any
@Input() set selectedItem(value){
   this.control.setValue(value)
}
@Output() change:EventEmitter<any>=new EventEmitter<any>
ngOnInit()
{
   this.subscription=this.control.valueChanges.subscribe(
            (res)=>this.change(res))
}
ngOnDestroy()
{
   this.subscription.unsubscribe()
}

还有你的parent

<app-component [selectedItems]="variable" 
    (change)="form.get('selectedItems').setValue($event)">
</app-component>

还有其他方法可以实现自定义表单控件（从 ControlValueAccessor 扩展）或注入 @Host() FormGroupDirective 或 ...

如何在 Angular ng-multiselect-dropdown 中显示预选值

How to show preselected values in Angular ng-multiselect-dropdown

angular

typescript

dropdown

multi-select

ngmodel