web-dev-qa-db-fra.com

bouton d'activation/désactivation ionic3 par programme lorsque la liste d'ions est pleine/vide

J'ai une barre de recherche pour laquelle je vérifie les événements d'entrée, puis filtre les données firebase.
Ceci est le code 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>

et voici le 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;
}
 });

}

Ce code fonctionne bien, mais j'aimerais maintenant activer un bouton chaque fois que la liste chargée dans la vue est vide, tout en le maintenant désactivé lorsqu'il y a au moins un élément chargé. Le code pour le bouton est celui-ci: 

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

Je change la valeur de isEnabled en true ou false dans la méthode getItems(), de cette façon:

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

mais le bouton reste désactivé (lors de la première entrée dans la page, isEnabled est marqué par défaut comme faux).
Les journaux sont affichés correctement lorsque j'écris quelque chose dans la barre de recherche, c’est-à-dire que chaque fois que je saisis une lettre, la console affiche "des éléments" ou "pas d’éléments", selon que la liste contient des éléments ou non, mais le bouton reste désactivé. .
Comment résoudre ce problème? Est-ce que je manque quelque chose?

EDIT: voici le code où j'ai mis 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
3
MLondei

Comme nous en avons parlé dans les commentaires, veuillez modifier votre message pour inclure la méthode complète dans laquelle vous définissez la propriété isEnabled afin que nous puissions savoir ce qui pourrait se passer, mais entre-temps, modifiez 

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

for

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

ou ce qui serait équivalent en utilisant l'opérateur elvis:

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

Vous pouvez le désactiver en vérifiant la longueur du tableau

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

Avec ce code, vous devrez initialiser la variable pour la déclarer, sinon une erreur se produira si vous déclarez do

public tagList: any[] = [];

Avec cela, vous pouvez supprimer la variable isEnabled et le morceau de code dont il vérifie si elle contient ou non des éléments.

J'espère que cela aide: D

0
Gabriel Barreto