javascript - Angular:多选下拉 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

我检查了 repo，他们似乎正在实现 ControlValueAccessor，它与您的略有不同，而且名称似乎也已更改，但是根据他们的最新代码，您可以使用 formControlName 将其与响应式代码相关联，然后您将拥有值(value)

导出类 MultiSelectComponent 实现 ControlValueAccessor

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