如何在Angular2中使用'ss-multiselect-dropdown'将已选择的数据显示为选择/检查？答案

【问题标题】：How to show already selected data as selected/checked using 'ss-multiselect-dropdown' in Angular2?如何在Angular2中使用'ss-multiselect-dropdown'将已选择的数据显示为选择/检查？
【发布时间】：2017-10-24 11:34:04
【问题描述】：

我正在使用 'ss-multiselect-dropdown' 进行多选下拉菜单。我从下拉列表中选择了几个选项并保存了数据。当我下次更新数据时，那个时候已经选择的数据应该显示为选中/选中。对于单选，它适用于两种数据绑定“[(ngModel)]”，但它不适用于多选值。如何使用“ss-multiselect-dropdown”显示/设置已选择/选中的数据？

提前致谢！

【问题讨论】：

能否请您展示一些您尝试过的代码？

标签： angular

【解决方案1】：

为此，您可以使用数组：

selecOptions = [];

HTML 方面：

                    <ss-multiselect-dropdown
                            [options]="finalServices"
                            [texts]="myTexts"
                            [settings]="mySettings"
                            [(ngModel)]="selecOptions"
                            (ngModelChange)="onChangeService($event)"
                            [ngModelOptions]="{standalone: true}">
                    </ss-multiselect-dropdown>

记住这里的选择是基于finalServices的对象数组中的id。

【讨论】：

我没有使用 ngModel 变量作为数组（yash_DedSec 指向完全相同）。声明了一个数组并在其中添加了已经选择的值，并且它起作用了。谢谢 Amit Chigadani 和 Yash。

【解决方案2】：

创建了一个plunker 来玩多选。

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Component} from '@angular/core';
import { IMultiSelectSettings, IMultiSelectTexts } from 'angular-2-dropdown-multiselect/src/multiselect-dropdown';
import { MultiselectDropdownModule} from 'angular-2-dropdown-multiselect';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
      <ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel"></ss-multiselect-dropdown>
  `,
})
export class App {
  optionsModel: number[] = [ 2, 3];

// Settings configuration
mySettings: IMultiSelectSettings = {
    enableSearch: true,
    checkedStyle: 'fontawesome',
    buttonClasses: 'btn btn-default btn-block',
    dynamicTitleMaxItems: 3,
    displayAllSelectedText: true
};

// Text configuration
myTexts: IMultiSelectTexts = {
    checkAll: 'Select all',
    uncheckAll: 'Unselect all',
    checked: 'item selected',
    checkedPlural: 'items selected',
    searchPlaceholder: 'Find',
    searchEmptyResult: 'Nothing found...',
    searchNoRenderText: 'Type in search box to see results...',
    defaultTitle: 'Select',
    allSelected: 'All selected',
};

// Options
myOptions: IMultiSelectOption[] = [
    { id: 1, name: 'Volvo'},
    { id: 2, name: 'Honda'},
    { id: 3, name: 'BMW'},
    { id: 4, name: 'Audi'},
];

}

@NgModule({
  imports: [ BrowserModule,MultiselectDropdownModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

更多详情请咨询here。

【讨论】：