infragistics igcselect web_component 加载事件异常

Question

我试图使用代码在构造函数中加载igcselect事件监听器，但是当我运行它时，页面的组件全部消失，代码如下，，我不确定它出了什么问题：

import {html, css, LitElement} from 'lit';
import {customElement} from 'lit/decorators.js';
import {defineComponents, IgcInputComponent, IgcSelectComponent, IgcSelectItemComponent} from 'igniteui-webcomponents';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import {PyWorker, TYPES, config} from 'https://pyscript.net/releases/2024.1.1/core.js';
import {ModuleManager} from 'igniteui-webcomponents-core';
import {IgcMultiColumnComboBoxModule} from 'igniteui-webcomponents-grids';
import {IgcMultiColumnComboBoxComponent} from 'igniteui-webcomponents-grids';
import {IgcSelectEventMap} from "igniteui-webcomponents/components/select/select";

defineComponents(IgcSelectComponent, IgcInputComponent);
ModuleManager.register(IgcMultiColumnComboBoxModule);

@customElement('app-view1')
export default class View1 extends LitElement {
  private stockexchangeSelect: IgcSelectComponent;
  private futuresSelect: IgcMultiColumnComboBoxComponent;

  constructor() {
    super();
    this.stockexchangeSelect = document.getElementById("stockexchange_selector") as IgcSelectComponent;
    this.futuresSelect = document.getElementById("futures_selector") as IgcMultiColumnComboBoxComponent;

    this.stockexchangeSelect.addEventListener("igcChange", (evt) => {
      this.enrollmentcomponents(evt);
    });
  }

  private async enrollmentcomponents(e: CustomEvent<IgcSelectItemComponent>) {

    const worker = new PyWorker();

    config.packages = ['pandas', 'numpy', 'tushare', 'matplotlib'];
    config.paths = ['../src/pycontroller/updateViewController.py'];

    worker.script =
      'import updateViewController\n' +
      'bindingToJson(' + this.stockexchangeSelect.value + ')';
    await worker.run(TYPES.PYTHON, config);

    const ajaxactualconfig = {
      type: "post",
      url: "../src/pycontroller/updateViewController.py",
      dataType: "json"
    };

    this.futuresSelect.dataSource = this.ajax(ajaxactualconfig);
    this.futuresSelect.textField = "name";
    this.futuresSelect.valueField = ["ts_code"];
  }

但是当我运行它时，页面的组件全部消失了

Answer 1

这里有两件事：

1. 您无法通过在 Document 上调用

   getElementById

   来获取选择，因为它位于 Shadow dom 下。你应该像这样在 Shadow dom 上调用它：

this.stockExchangeSelect = this.shadowRoot!.getElementById('stockExchange_selector') as IgcSelectComponent;

2. 这些元素很可能不会在构造函数中呈现，并且尝试获取选择将返回

   null

   。您可以通过多种方式解决此问题：

• 将您的逻辑放入请求动画帧中（注意这可能并不总是有效）：

constructor() {
  super();
  requestAnimationFrame(() => {
    this.stockExchangeSelect = this.shadowRoot!.getElementById('stockExchange_selector') as IgcSelectComponent;

    this.stockExchangeSelect.addEventListener("igcChange", (evt) => {
      this.enrollmentComponents(evt);
    });
  });
}

• 将逻辑放入

  firstUpdated

  生命周期挂钩中，而不是放在构造函数中。这是执行您需要的操作的建议方法 - [文档][1]：

firstUpdated(e: any) {
  super.firstUpdated(e);
  this.stockExchangeSelect = this.shadowRoot!.getElementById('stockExchange_selector') as IgcSelectComponent;

  this.stockExchangeSelect.addEventListener("igcChange", (evt) => {
    this.enrollmentComponents(evt);
  });
}

• 最后您可以在标记中添加句柄。这样你就不需要担心组件是否已经渲染了：

<igc-select @igcChange="${this.enrollmentComponents}">
  ... select items go here ...
</igc-select>

  [1]: https://lit.dev/docs/components/lifecycle/#firstupdated