web-dev-qa-db-ja.com

ionicリストがいっぱい/空のときにプログラムでionic3の有効化/無効化ボタン

入力イベントをチェックし、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;
}
 });

}
_

このコードはうまく機能しますが、ビューに読み込まれたリストが空の場合は常にボタンを有効にし、少なくとも1つの要素が読み込まれている場合はボタンを無効にしたいと思います。ボタンのコードは次のとおりです。

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

getItems()メソッドでisEnabledの値を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;
 }
}
_
angulartypescriptionic2ionic3
7
Usr

コメントで述べたように、isEnabledプロパティを設定するメソッド全体が含まれるように投稿を編集して、何が起こっているのかを理解できるようにしますが、それまでの間は変更してください

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

for

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

または、elvis演算子を使用して同等となるもの：

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

配列の長さをチェックすることを無効にすることができます

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

このコードでは、変数を宣言するときに変数を開始する必要があります。そうしないと、宣言するときにエラーをスローします

public tagList: any[] = [];

これにより、isEnabled変数と、アイテムがあるかどうかをチェックするコードを削除できます。

これが役に立てば幸い：D

0
Gabriel Barreto