如何在Angular 5中使用TypeScript实现多选下拉?

elcex8rz  于 2022-11-18  发布在  TypeScript
关注(0)|答案(3)|浏览(130)

请告诉一个方法来添加多选下拉在Angular 5使用TypeScript。我正在使用WebStorm作为IDE。

qjp7pelc

qjp7pelc1#

如何使用材质框架mat-select?look here,搜索多项选择

5t7ly7z5

5t7ly7z52#

我对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>
uklbhaso

uklbhaso3#

在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;
    });

Data是下拉列表中可供选择的实际数据Placeholder是您希望下拉列表显示的内容ngModel是您希望所选项目显示的数组settings是下拉列表的设置onselect和onselectall是您必须定义的两种方法,以获得不同的选择行为。

相关问题