角度：多選下拉列表ID

Question

我在此帖子后創建了帶復選框的多選下拉列表： https : //github.com/NileshPatel17/ng-multiselect-dropdown

如下：

<div (mouseleave)="showDropDown = false" [class.disabled]="disabled">
  <button class="drop-toggle btn flat" (click)="showDropDown=!showDropDown">
    <span *ngIf="checkedList.length <= 0">{{_placeholder}}</span>
    <span *ngIf="checkedList.length > 0">{{buttonText()}}</span>   
    <i class="fa fa-angle-down"></i>
  </button>
  <div class="drop-show" *ngIf="showDropDown" >
    <label *ngFor="let item of _data">
      <input type="checkbox" value="item.id" [(ngModel)]="item.checked" (change)="getSelectedValue(item)" />
      <span>{{item.text}}</span>
    </label>
  </div> 
</div>

export class MultiselectDropdownComponent implements OnInit {
  public _settings: IDropdownSettings;
  public _data: Array<ListItem> = [];
  public selectedItems: Array<ListItem> = [];
  public isDropdownOpen = false;
  showDropDown = false;
  _placeholder = 'Select';
  _selectedPlaceholder = 'Selected';
  defaultSettings: IDropdownSettings = {
    singleSelection: false,
    idField: 'id',
    textField: 'text',
    limitSelection: -1,
    maxHeight: 150,
    itemsShowLimit: 5,
    searchPlaceholderText: 'Search',
    noDataAvailablePlaceholderText: 'No data available',
    closeDropDownOnSelection: false,
    showSelectedItemsAtTop: false
  };

  @Input()
  public set placeholder(value: string) {
    if (value) {
      this._placeholder = value;
    } else {
      this._placeholder = 'Select';
    }
  }
  @Input()
  public set selectedPlaceholder(value: string) {
    if (value) {
      this._selectedPlaceholder = value;
    } else {
      this._selectedPlaceholder = 'Selected';
    }
  }
  @Input()
  disabled = false;

  @Input()
  public set settings(value: IDropdownSettings) {
    if (value) {
      this._settings = Object.assign(this.defaultSettings, value);
    } else {
      this._settings = Object.assign(this.defaultSettings);
    }
  }

  @Input()
  public list: any[];
  @Input()
  public set data(value: Array<any>) {
    if (!value) {
      this._data = [];
    } else {
      this._data = value.map(
        (item: any) =>
          typeof item === 'string'
            ? new ListItem(item)
            : new ListItem({
              id: item[this._settings.idField],
              text: item[this._settings.textField]
            })
      );
    }
  }

  @Output()
  shareCheckedList = new EventEmitter();
  @Output()
  shareIndividualCheckedList = new EventEmitter();
  checkedList: Array<ListItem> = [];
  currentSelected: {};

  constructor() { }

  getSelectedValue(item) {
    if (item.checked) {
      this.checkedList.push(new ListItem({ id: item.id, text: item.text }));
    } else {
      const index = this.checkedList.findIndex(i => i.id === item.id);
      this.checkedList.splice(index, 1);
    }

    this.currentSelected = { checked: item.checked, id: item.id };

    // share checked list
    this.shareCheckedlist();

    // share individual selected item
    this.shareIndividualStatus();
  }
  itemShowRemaining(): number {
    return this.checkedList.length - this._settings.itemsShowLimit;
  }
  isAllItemsSelected(): boolean {
    return this._data.length === this.checkedList.length;
  }
  shareCheckedlist() {
    this.shareCheckedList.emit(this.checkedList);
  }
  shareIndividualStatus() {
    this.shareIndividualCheckedList.emit(this.currentSelected);
  }
  buttonText() {
    if (this.checkedList.length > this._settings.itemsShowLimit) {
      return this.checkedList.length + ' ' + this._selectedPlaceholder;
    } else {
      let selected = '';
      const delimiter = ', ';
      this.checkedList.forEach(item => {
        selected += item.text + delimiter;
      });
      return selected.substr(0, selected.length - 2);
    }
  }

  unSelectAll() {
    this.checkedList = [];
    this._data.forEach(item => {
      item['checked'] = false;
    });
  }

  ngOnInit() {
    this.checkedList = [];
  }
}

我在子組件中將其用作：

<div class="col-sm-6">
  <ct-multiselect-dropdown [data]="myData"
                           [settings]="multiDropdownSettings"
                           [placeholder]="'Select Data'"
                           [selectedPlaceholder]="'Data Selected'"></ct-multiselect-dropdown>
</div>

在我的父組件上單擊一個按鈕，如下所示：

submitClicked() {
}

使用其他控件作為子控件上的文本輸入時，我可以執行以下操作以檢查它們是否為空：

this.myForm.get('mycontrol').value;

但是如何使用上面的多選控件來做到這一點。

或者是否還有其他方法可以通過我父母中的按鈕單擊控件來識別此控件是否選擇了某些數據

謝謝

Answer 1

我檢查了存儲庫，似乎他們實現的ControlValueAccessor與您的稍有不同，並且名稱也有所更改，但是，根據他們的最新代碼，您可以使用formControlName將其與反應性代碼關聯，然后您將獲得該值

export class MultiSelectComponent implements ControlValueAccessor

<ct-multiselect-dropdown [data]="myData"
                           [settings]="multiDropdownSettings"
                           [placeholder]="'Select Data'"
                           [selectedPlaceholder]="'Data Selected'"
                           formControlName="yourControlNameHere"
    ></ct-multiselect-dropdown>