javascript - Salesforce LWC - 在数据列表元素上使用 querySelector 时出现错误消息

Question

我正在编写一个闪电网络组件，我必须在其中分配 <datalist>元素到我的 <input> 之一元素'list属性，以便绑定(bind)它们。

出于某种原因，这个 JS 行:

const streetsListId = this.template.querySelector('streetdatalist').id;

抛出此 JS 错误消息:

Cannot read property 'id' of null

Web 组件 HTML:

<template>
    <div class="container">
        <input  id="inputstreet"
                name="inputstreet"
                type="text"
                list="streetdatalist"
                label="Search"
                onkeydown={onStreetChange}
                onblur={onStreetChange} />

        <datalist id="streetdatalist">
             <template for:each={streets} for:item='street'>
                 <option key={city.cityCode}>{city.cityName}</option>
             </template>
        </datalist>
    </div>
</template>

Web组件JS:

renderedCallback() {
    if (this.initialized) {
        return;
    }
    this.initialized = true;

    const streetsListId = this.template.querySelector('streetdatalist').id;
    this.template.querySelector('inputstreet').setAttribute('list', streetsListId);
}

Answer 1

通过使用'[data-id=更改querySelector解决了这个问题:

const citiesListId = this.template.querySelector('[data-id="streetdatalist"]').id;