typescript 当离子列表已满/空时，ionic3 以编程方式启用/禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44675338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic3 enable/disable button programmatically when ion list is full/empty
提问by Usr
I have a searchbar for which I check for input events and then filter firebase data.
This is the html code:
我有一个搜索栏，用于检查输入事件，然后过滤 firebase 数据。
这是html代码：
<ion-searchbar (ionInput)="getItems($event)" placeholder="Add tag ... "></ion-searchbar>
<ion-list>
<ion-item *ngFor="let tag of tagList">
<h2> {{ tag.name }} </h2>
</ion-item>
</ion-list>
and this is the ts code:
这是 ts 代码：
getItems(searchbar) {
// Reset items back to all of the items
this.initializeItems();
// set q to the value of the searchbar
var q = searchbar.srcElement.value;
// if the value is an empty string don't filter the items
if (!q) {
return;
}
this.tagList = this.tagList.filter((v) => {
if(v.name && q) {
if (v.name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
}
This code works well, but now I would like to enable a button whenever the list loaded on the view is empty, while keeping it disabled when there's at least one element loaded. The code for the button is this one:
这段代码运行良好，但现在我想在视图上加载的列表为空时启用一个按钮，同时在至少加载一个元素时将其禁用。按钮的代码是这样的：
<button ion-button [disabled]="!isEnabled">Add tag</button>
I change the value of isEnabledto true or false in the getItems()method, this way:
我isEnabled在getItems()方法中将 的值更改为 true 或 false ，如下所示：
if (this.tagList.length==0){
console.log('No elements ')
this.isEnabled=true;
} else {
console.log('Elements ')
this.isEnabled=false;
}
but the button remains disabled (when first entering the page, isEnabled is marked as false by default).
The logs are shown correctly when I write something in the searchbar, that is whenever I enter a letter the console outputs "elements" or "no elements" depending if the list has elements or not, but the button remains disabled.
How do I solve that? Am I missing something?
但按钮保持禁用状态（第一次进入页面时，默认情况下 isEnabled 标记为 false）。
当我在搜索栏中写一些东西时，日志会正确显示，即每当我输入一个字母时，控制台会输出“元素”或“无元素”，具体取决于列表是否有元素，但按钮仍处于禁用状态。
我该如何解决？我错过了什么吗？
EDIT: here's the code where I set isEnabled:
编辑：这是我设置的代码isEnabled：
getItems(searchbar) {
// Reset items back to all of the items
this.initializeItems();
// set q to the value of the searchbar
var q = searchbar.srcElement.value;
this.textSearch = q;
// if the value is an empty string don't filter the items
if (!q) {
return;
}
this.tagList = this.tagList.filter((v) => {
if(v.name && q) {
if (v.name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
if (this.tagList.length==0){
this.isEnabled = true;
} else{
this.isEnabled = false;
}
}
回答by sebaferreras
As we talked about in the comments, please edit your post to include the entire method where you set the isEnabledproperty so we can figure out what could be going on, but in the meantime, change
正如我们在评论中所讨论的，请编辑您的帖子以包含您设置isEnabled属性的整个方法，以便我们弄清楚可能发生的事情，但与此同时，更改
<button ion-button [disabled]="!isenabled">Add tag</button>
for
为了
<button ion-button [disabled]="tagList && tagList.length > 0">Add tag</button>
or what would be equivalent by using the elvis operator:
或使用 elvis 运算符等效的方法：
<button ion-button [disabled]="tagList?.length > 0">Add tag</button>
回答by Gabriel Barreto
You can disable it checking the array length
您可以禁用它检查数组长度
<button ion-button [disabled]="tagList.length > 0">Add tag</button>
With this code you'll need to initiate the variable when declaring it, or it'll throw an error, when declaring do
使用此代码，您需要在声明变量时启动变量，否则在声明时会抛出错误
public tagList: any[] = [];
With this you can remove the isEnabledvariable and the piece of code whose checks if it has items or don't.
有了这个，您可以删除isEnabled变量和检查它是否有项目的代码段。
Hope this helps :D
希望这会有所帮助：D
