ngx-smart-modal中的Select2插件不起作用

问题描述 投票:0回答:1

我在一个角度项目中使用select2插件进行选择。当我以表单形式或以引导模式添加下拉组件时,一切都会按预期进行。但是我决定使用ngx-smart-modal,并且当我在此模式中添加相同的组件时,它不起作用。实际上,它似乎删除了select2的span标签。

这里是链接stackblitz

angular bootstrap-modal jquery-select2
1个回答
1
投票

问题不是来自库,而是来自组件代码本身:

onModalOpen() {
    setTimeout(() => {
      $('.js-example-inside').select2({
        placeholder: "inside modal"
      });
    });
  }

您需要触发(在我的示例中为setTimeout)新的Angular check cycle (lifecycle hooks)以等待模式内容在DOM中显示并可用。您尝试使用select2(...)定位的元素尚不可用,这就是为什么它不起作用的原因。

因此固定代码如下:

  onModalOpen() {
    setTimeout(() => {
      $('.js-example-inside').select2({
        placeholder: "inside modal"
      });
    });
  }

这里是the fixed stackblitz

© www.soinside.com 2019 - 2024. All rights reserved.