Question

请告诉使用TypeScript在Angular 5中添加多选下拉列表的方法。我使用WebStorm作为IDE。

Answer 1

如何使用mat-select的材料框架？查看here，搜索多项选择

Answer 2

我对WebStorm并不是很熟悉，但是这个概念应该确实相同。重要的部分是将multiselect属性添加到select输入中，如下所示：

    <select multiselect multiple="multiple" 
            [formControlName]="question.key" 
            [id]="question.key" class="form-control" 
            [ngClass]="{'is-invalid': (!isValid && isTouched)}">
      <option *ngFor="let opt of question.options; let idx = index" [value]="idx">
        {{opt}}
      </option>
    </select>

Answer 3

在您的HTML页面中

<ng-multiselect-dropdown [placeholder]=" Sequences "
                                 [data]="sequences"
                                 [(ngModel)]="sequencesSelectedItems"
                                 [settings]="sequencesDropdownSettings"
                                 (onSelect)="onSequenceSelect($event)"
                                 (onSelectAll)="onSequenceSelectAll($event)">
        </ng-multiselect-dropdown>

以您的组件

sequencesSelectedItems = [];
sequences = []
  sequencesDropdownSettings = {
    singleSelection: false,
    idField: 'id',
    textField: 'value',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 3,
    allowSearchFilter: true
  }; 
this.sequenceService.GetSequences().subscribe(res => {
      this.sequences = res;
    });

数据是下拉列表中可供选择的实际数据占位符是您希望下拉菜单说的 ngModel是您要选择的项目所在的数组设置是下拉菜单的设置您必须定义onselect和onselectall两种方法才能获得不同的选择行为。

如何使用TypeScript在Angular 5中实现多选下拉列表？

3 个答案: