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

Question

我有一个搜索栏,我检查输入事件,然后筛选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>

这是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).
当我在搜索栏中写入内容时,日志会正确显示,即每当我输入一个字母时,控制台输出"元素"或"无元素",具体取决于列表是否包含元素,但按钮保持禁用状态.
我该如何解决？我错过了什么吗？

编辑:这是我设置的代码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>