使用 Angular 2 多选下拉菜单答案

【问题标题】：Using Angular 2 Multiselect dropdown使用 Angular 2 多选下拉菜单
【发布时间】：2017-09-26 18:03:01
【问题描述】：

我终于设法加载了softsimon angular-2-multiselect-dropdown。我如何获得选定的选项？

我正在使用 softsimon angular-2-multiselect-dropdown v 0.4.0

**编辑：**

<ss-multiselect-dropdown [options]="ArrayObject" [texts]="myTexts" [settings]="mySettings" (onModelChange)="dummy"></ss-multiselect-dropdown>

ArrayObject 是：

    for(let x = 0; x < this.productArray.length ; x++ ){
        let temp={id : x , name : this.productArray[x]};
        this.ArrayObject[x]=temp;
    }

询问的输出：

[ { "id": 0, "name": "redBox" }, { "id": 1, "name": "orangeBox" } ]

提前致谢

【问题讨论】：

欢迎来到 StackOverflow。请发布代码，说明您尝试完成的工作、尝试的内容以及失败的地方。
你为什么不只是使用this.ArrayObject.push({id : x , name : this.productArray[x]});。如果您将<div>{{ArrayObject | json}}</div> 添加到您的页面，您会得到什么？您能否也将此输出添加到您的问题中？
@GünterZöchbauer 我会按照您的建议进行更改。我已经添加了你问的输出。

标签： angular

【解决方案1】：

您可以像这样将ngModel 添加到ss-multiselect-dropdown：

<ss-multiselect-dropdown 
   [options]="ArrayObject" 
   [texts]="myTexts" 
   [settings]="mySettings" 
   (ngModelChange)="onChange($event)"
   [ngModel]="selectedTexts"
></ss-multiselect-dropdown>

您必须将使用此多选的组件更改为以下内容：

export class TextSelectorComponent {

   public selectedTexts: any[] = [];

   public onChange(): void {
      console.log(this.selectedTexts);
   }

}

触发更改后，ngModel 将包含 selectedTexts 变量内的选定值。

【讨论】：

我将 [(ngModel)] 添加到 html 标记 @PierreDuc，但由于 ngModel 不是 ss-multiselect-dropdown 的现成属性而出现错误。此外，我删除了 [(ngModel)] 并在包含 onChange() 的行上添加了一个调试器点，该函数未执行。
您是否已将 Angular FormModule 添加到您的导入中？我还更新了我的答案，只使用[] 符号而不是[()]。你也可以试试。这是因为已经有一个 ngModelChange 监听器
现在可以正常工作了。谢谢：）。我没有导入 FormsModule 。我已经在 ngModel 上应用了更改。
我可以忽略
选择的第一个值是""。有人遇到过这种情况吗？