首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用客户端筛选器时,AMP-LIST不会在初始加载时呈现元素。

使用客户端筛选器时,AMP-LIST不会在初始加载时呈现元素。
EN

Stack Overflow用户
提问于 2018-11-28 12:47:42
回答 1查看 436关注 0票数 0

我试图通过遵循文档来实现客户端过滤。

但是我遇到的问题是,当最初加载页面时,列表是空的(amp-list不从远程url填充列表),但是当我开始键入一些查询时,功能就像预期的那样工作。

以下是我的实现的片段:

代码语言:javascript
复制
<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>

在控制台中,我可以看到一个与此相关的警告:

代码语言:javascript
复制
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.

这里还需要注意的一点是,在按下下拉按钮时,输入字段是可见的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-28 13:45:17

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

代码语言:javascript
复制
<button on="tap:AMP.setState({filteredCities: citiesList.items})" tabindex="0">

但我相信这是最好的方法。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53519854

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档