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

Question

我正在编写一个闪电网络组件，我必须将一个<datalist>元素分配给我的一个<input>元素的list属性，以便绑定它们。

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

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

抛出此 JS 错误消息：

无法读取 null 的属性“id”

网页组件 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>

网页组件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;