typescript - Ionic 3 过滤器列表
问题描述
我被困在这里
当我单击列表时,没有任何反应,控制台也没有显示任何内容。我使用搜索过滤器打字稿进入列表过滤器。我不擅长离子特别是角度js。
流行的.html:
<ion-item>
<ion-select (click)="this.filterService.getYear($event)" >
<ion-option value="first">1st Year</ion-option>
<ion-option value="second">2nd Year</ion-option>
<ion-option value="third">3rd Year</ion-option>
<ion-option valur="fourth">4th Year</ion-option>
<ion-option value="fifth">5th Year</ion-option>
</ion-select>
</ion-item>
过滤器.ts:
getYear(searchbar, item)
{
let nav = this.app.getActiveNav();
console.log(this.posts);
this.keyboard.close();
this.initializeItems();
var q = searchbar.srcElement.value;
if (!q) {
return;
}
this.filters = this.posts.filter((value) => {
console.log(value);
if (value.data().year && q) {
if (value.data().year.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
}
解决方案
我认为您需要为此使用 ngModel 数据绑定,如文档中所述
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
对于您的示例,这将更改为
<ion-select [(ngModel)]=“filterService.getYear($event)”>
推荐阅读
- macos - ssh 连接断开时丢失 tmux 会话
- python - 无法访问 Flask 应用生产服务器中的查询字符串参数
- discord - 公会成员计数未在 Discord.py 的 tasks.loop 中更新
- kibana - ELK -Kibana 查询以获取错误百分比
- d3.js - 使用 d3 scaleTime 显示年月日的多轴
- android - Android 蓝牙 Gatt 服务器/客户端断开连接问题
- excel - 是否有任何功能可以设置从制表器导出的 excel 样式?
- apache-spark - Apache 激发多个工作人员,但只有一个数据库
- javascript - 在 Laravel sweetalert 中使用和发布输入
- blockchain - Pancakeswap 分叉:MasterChef 合约抛出错误“调用者不是所有者”