Angular 4-如何将multiSelect下拉列表限制为仅1个选项

Question

我需要将multiSelect下拉列表限制为仅选择2个选项。我不能在项目中使用单选。我尝试了selectionLimit：1，但是没有用。我该如何限制呢？它是针对我项目中的语言的，我只希望选择2。

我的HTML代码：

<ss-multiselect-dropdown (dropdownClosed)="onCloseDropdown($event)"  (ngModelChange)="onModelChange($event)" [ngClass]="{'administration-multiselect':isAdministrationOption,'report-multiselect':!isAdministrationOption }" class="pm-multiselect-design"  [(ngModel)]="msModel" [settings]="msSettings" [texts]="msTexts" [options]="msOptions"></ss-multiselect-dropdown>

我的TS代码：

import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from 'angular-4-dropdown-multiselect';
import { TranslateService } from '@ngx-translate/core';
import { DropdownComponent } from '../layout/dropdown/dropdown.component';

@Component({
    selector: 'pm-multiselect-single-choice',
    templateUrl: 'pm-multiselect.component.html',
    styles: [require('./pm-design.component.css')]
})

export class MultiselectSingleChoiceComponent implements OnInit, OnChanges {

constructor(private _translate: TranslateService) {
}

@Input() msOptions: IMultiSelectOption[] = [];
@Input() type: string = '';
@Input() initials: number[] = [];
@Output() changed = new EventEmitter<number[]>();
isAdministrationOption: boolean = false;
hasModelChanged: boolean = false;


msModel: number[] = [];

msSettings: IMultiSelectSettings = {};

msTexts: IMultiSelectTexts= {
            defaultTitle: this._translate.instant("CHOOSELOCATION"),
            checkAll: this._translate.instant("CHECKALL"),
            allSelected: this._translate.instant("ALLSELECTED"),
            checked: this._translate.instant("CHECKED"),
            checkedPlural: this._translate.instant("CHECKEDPLURAL")
        };


refreshMultiselect() {
    var chooseText = '';
    switch (this.type) {
        case 'LOCATIONS': chooseText = this._translate.instant("CHOOSELOCATION");
            break;
        case 'SALETYPE': chooseText = this._translate.instant("CHOOSE");
            break;
        case 'GROUP': chooseText = this._translate.instant("CHOOSE");
            break;
        default: chooseText = this._translate.instant("CHOOSE");
            break;
    }

    this.msTexts = {
        defaultTitle: chooseText,
        checkAll: this._translate.instant("CHECKALL"),
        allSelected: this._translate.instant("ALLSELECTED"),
        checked: this._translate.instant("CHECKED"),
        checkedPlural: this._translate.instant("CHECKEDPLURAL")
    }
}

ngOnInit(): void {
    this.subscribeLangChange();
    this.selectTypeOptions();

}


selectTypeOptions() {
    if (this.type === 'LOCATIONS') {
    this.msOptions.forEach(item => { this.msModel.push(item.id) });
        this.msSettings = {
            minSelectionLimit: 1,
            checkedStyle: 'glyphicon',
            buttonClasses: 'btn btn-default',
            displayAllSelectedText: true,
            dynamicTitleMaxItems: 1,
            selectionLimit: 2,
            autoUnselect: true
        };
    }
    else if (this.type === 'SALETYPE') {
       this.msOptions.forEach(item => { this.msModel.push(item.id) });
        this.msTexts.defaultTitle = this._translate.instant("CHOOSE");
        this.msSettings= {
            minSelectionLimit: 1,
            checkedStyle: 'glyphicon',
            buttonClasses: 'btn btn-default',
            dynamicTitleMaxItems: 1,
            displayAllSelectedText: true,
            selectionLimit: 2,
            autoUnselect: true
        };

    }
    else if (this.type === 'GROUP') {
        this.msTexts.defaultTitle = this._translate.instant("CHOOSE");
        this.msSettings = {
            minSelectionLimit: 0,
            checkedStyle: 'glyphicon',
            buttonClasses: 'btn btn-default',
            dynamicTitleMaxItems: 1,
            displayAllSelectedText: true,
            selectionLimit: 2,
            autoUnselect: true
        };
    }
    else if (this.type === 'LANGUAGES' || this.type === 'CURRENCIES') {
        this.isAdministrationOption = true;
        this.msTexts.defaultTitle = this._translate.instant("CHOOSE");
        this.msSettings = {
            minSelectionLimit: 1,
            checkedStyle: 'glyphicon',
            buttonClasses: 'btn btn-default btn-block',
            dynamicTitleMaxItems: 3,
            displayAllSelectedText: true,
            selectionLimit: 2,
            autoUnselect: true
        };
    }
}


ngOnChanges()
{
    if (this.initials != null && this.msModel.length==0) this.initials.forEach(item => { this.msModel.push(item) });
}

subscribeLangChange() {
    return this._translate.onLangChange.subscribe(x => this.refreshMultiselect());
}

onModelChange(): void {
    //this.changed.emit(this.msModel);
    this.hasModelChanged = true;
}

onCloseDropdown(): void {
    if (this.hasModelChanged) {
        this.hasModelChanged = false;
        this.changed.emit(this.msModel);
    }
}

}