如何通过按下按钮选择所有 select2 元素?

彼得艾伦

我使用 angular 的 Select2 组件作为多重选择器。我需要一个选项来通过单击按钮或复选框来选择所有元素。https://www.npmjs.com/package/ng-select2

我尝试在按下按钮时在数组 [(ngModel)] = "value" 中插入元素的所有 id,但它没有用

.HTML 代码

<ng-select2 [data]="exampleData"
            [options]="options"
            [width]="200"
            [(ngModel)]="value"
            (valueChanged)="onTagChanged($event)">
</ng-select2>
<button (click)='selectAll()'>Select all</button>

.TS 代码

ngOnInit() {
    this.exampleData = [
      {
        id: '0',
        text: 'Pau Cano Dominguez',
      },
      {
        id: '2',
        text: 'Miguel Ángel Vargas Gomez'
      },
      { id: '3',
        text: 'Pedro Medina Cruz'
      },
      { id: '4',
        text: 'Oriol Fuentes Nuñez'
      },
      {
        id: '5',
        text: 'Rayan Mora Sanchez'
      }
    ];
    this.options = {
      width: '200',
      multiple: true,
      tags: false
    };
}
selectAll() {
    console.log('Select All Pushed');
    this.value.push('0');
    this.value.push('1');
    this.value.push('2');
    this.value.push('3');
    this.value.push('4');
}

ng-select2 组件使用 OnPush 更改检测策略。这意味着它只有在检测到其输入已更新时才会更新自身。

您可以在第 31 行的 ng-select2组件代码中看到这一点

现在数组是通过引用传递的,这就是组件没有检测到任何变化的原因。您需要做的是传入一个新数组。所以在你的selectAll函数中这样做:

this.value = ['0', '1', '2', '3', '4']; // this passes a new array reference

要了解有关更改检测更多信息,请阅读此处

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何为select2 drop元素添加特定的类?

如何在v4.0中将类添加到select2元素

Select2 templateResult数据没有要引用的元素

有什么方法可以检查元素是否已将jquery select2应用于该元素?

如何使用jquery验证插件来验证select2元素?

jQuery select2控件-检索最后选择的元素

如何处理“在未使用Select2的元素上调用了select2('destroy')方法”

通过滚动使select2元素保持固定大小?

删除select元素上的select2边框?

更改插入到select2中当前选择元素中的选择文本

确认select2选择

为什么select2不设置所有数组元素?

如何通过单击select2元素获得输出?

如何使select2元素与数据表和分页一起使用?

在选择另一个select2下拉菜单时重置一个select2下拉菜单的元素

同步2个Select2元素

Select2打开后选择所有元素

如何通过geb测试select2

如何从jQuery Select2元素中删除特定选项?

select2通过jquery或js触发下拉菜单中的元素

在自动加载从angularjs中的多个类型的select2中选择的所有元素之后进行检测

如何在jQuery的select2中的2个选择框之间更改选定的选项元素?

通过javascript设置Multiple Select2元素的数据

使用select2,如何在处理后访问原始选择/输入元素?

无效的 select2 元素的样式

如何在 select2 元素中导航

Select2:如何选择相关结果

如何通过 querySelectorAll() 选择所有元素

为什么不将 Select2 应用于我的选择元素?