使用客户端过滤器时，AMP-LIST 不会在初始加载时呈现元素

Question

我正在尝试按照 this 文档
实施客户端过滤但我遇到的问题是，当最初加载页面时，列表是空的（amp-list 不会从远程 url 填充列表），但是当我开始输入一些查询时，功能会按预期工作.

以下是我的实施片段：

<amp-state id="citiesList" src="//.../citiesList.json"></amp-state>

<input on="input-debounced:AMP.setState({filteredCities: citiesList.items.filter(a => event.value=='' ? true : a.name.toLowerCase().indexOf(event.value.toLowerCase())>=0)})">

<amp-list [src]="filteredCities" src="//.../citiesList.json" layout="fixed-height" height="350" [height]="(48)*filteredCities.length">
    <template type="amp-mustache">
        <li>
            <span>{{name}}</span>
        </li>
    </template>
        <div overflow class="list-overflow"></div>
</amp-list>

并且在控制台中我可以看到与此相关的警告：

Default value (//.../citiesList.json) does not match first result (null) for <AMP-LIST [src]="filteredCities">. We recommend writing expressions with matching default values, but this can be safely ignored if intentional.

这里还有一件事要注意，按下下拉按钮时输入字段是可见的。

Answer 1

我必须通过在 select 按钮上编写以下代码来解决此问题：

<button on="tap:AMP.setState({filteredCities: citiesList.items})" tabindex="0">

但我确定这是否是最好的方法。

使用客户端过滤器时，AMP-LIST 不会在初始加载时呈现元素

AMP-LIST does not render elements on initial load when using client side filter

amp-html