Question

我有一个搜索栏，我检查输入事件，然后过滤火力显示数据这是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>

这是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;
}
 });

}

此代码运行良好，但现在我想在视图上加载的列表为空时启用按钮，同时在加载至少一个元素时保持禁用。按钮的代码是这个：

  <button ion-button [disabled]="!isEnabled">Add tag</button>

我在isEnabled方法中将getItems()的值更改为true或false，这样：

if (this.tagList.length==0){
console.log('No elements ')
this.isEnabled=true;
  } else {
    console.log('Elements ')
    this.isEnabled=false;
  }

但按钮保持禁用状态（首次进入页面时，isEnabled默认标记为false）当我在搜索栏中写东西时，日志会正确显示，也就是每当我输入一个字母时，控制台输出＆＃34;元素＆＃34;或＆＃34;没有元素＆＃34;取决于列表是否包含元素，但按钮保持禁用状态我该如何解决？我错过了什么吗？

编辑：这是我设置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;
 }
}

Answer 1

正如我们在评论中所讨论的那样，请修改您的帖子以包含设置isEnabled属性的整个方法，以便我们可以弄清楚可能会发生什么，但在此期间，更改

<button ion-button [disabled]="!isenabled">Add tag</button>

的

<button ion-button [disabled]="tagList && tagList.length > 0">Add tag</button>

或使用elvis运算符的等价物：

<button ion-button [disabled]="tagList?.length > 0">Add tag</button>

Answer 2

您可以禁用它来检查数组长度

<button ion-button [disabled]="tagList.length > 0">Add tag</button>

使用此代码，您在声明变量时需要启动变量，或者在声明时执行错误

public tagList: any[] = [];

使用此功能，您可以删除isEnabled变量以及检查其是否包含项目或代码的代码。

希望这会有所帮助：D

离子列表已满/空时，以编程方式启用/禁用ionic3

2 个答案: