时间戳

首页 > 解决方案 > 值更改时出现 MDCSelect 错误 - 未捕获的类型错误：无法读取未定义的属性（读取“长度”）

asp.net-core - 值更改时出现 MDCSelect 错误 - 未捕获的类型错误：无法读取未定义的属性（读取“长度”）

问题描述

我遇到了MDCSelect组件的问题。我有两个选择框。当用户从第一个选择框中选择一个项目时，调用一个 ajax 函数并重绘第二个选择框。到目前为止，一切都很好。

但是当用户从第二个选择框（重绘框）中选择一项时，就会出现问题并引发异常。例外情况如下：

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at MDCSelectFoundation.layout (VM2888 foundation.js:324)
    at MDCSelectFoundation.handleFocus (VM2888 foundation.js:399)
    at HTMLDivElement.handleFocus (VM2873 component.js:149)
    at Object.restoreFocus (VM2863 component.js:210)
    at MDCMenuSurfaceFoundation.maybeRestoreFocus (VM2866 foundation.js:661)
    at MDCMenuSurfaceFoundation.close (VM2866 foundation.js:355)
    at MDCMenuSurface.close (VM2863 component.js:109)
    at MDCMenu.set [as open] (VM2861 component.js:131)
    at Object.closeMenu (VM2873 component.js:449)
    at MDCSelectFoundation.setSelectedIndex (VM2888 foundation.js:242)

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at MDCSelectFoundation.layout (VM2888 foundation.js:324)
    at MDCSelectFoundation.handleChange (VM2888 foundation.js:378)
    at MDCSelectFoundation.setSelectedIndex (VM2888 foundation.js:246)
    at MDCSelectFoundation.handleMenuItemAction (VM2888 foundation.js:388)
    at HTMLDivElement.handleMenuItemAction (VM2873 component.js:167)
    at MDCMenu.MDCComponent.emit (VM2976 component.js:120)
    at Object.notifySelected (VM2861 component.js:386)
    at MDCMenuFoundation.handleItemAction (VM2868 foundation.js:154)
    at HTMLDivElement.handleItemAction_ (VM2861 component.js:98)
    at MDCList.MDCComponent.emit (VM2976 component.js:120)

为了重绘第二个选择框，我实现了下面的代码（简化代码）：

let arrBuilder = [];
arrBuilder.push("<li class='mdc-list-item mdc-ripple-upgraded' data-value='", value, "' tabindex='", tabIndex, "'>");
arrBuilder.push("<span class='mdc-list-item__ripple'></span>");
arrBuilder.push("<span class='mdc-list-item__text'>", description, "</span>");
arrBuilder.push("</li>");
const li = arrBuilder.join("");

ulElement.append(li);

const mdcSelect = new MDCSelect(document.querySelector('#secondSelect'));
mdcSelect.layoutOptions();

如上所述，当用户在第二个选择框中选择了一个元素时，即选择的值发生变化时，则抛出异常。

我在 Windows 机器上使用 web 的材料设计，版本 10（但也尝试使用 13）。

标签： asp.net-corematerial-design

解决方案

推荐阅读