ionic3 bouton activer/désactiver par programme lorsque ion liste est pleine/vide
J'ai une barre de recherche pour que je vérifie pour les événements d'entrée et ensuite filtrer firebase de données.
Voici 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 c'est le ts de code:
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 maintenant, je voudrais activer un bouton à chaque fois que la liste chargé sur l'affichage est vide, tout en gardant désactivé quand 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 changer la valeur de isEnabled
à true ou à false dans le getItems()
méthode, 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 saisie de la page, isEnabled est marqué comme false par défaut).
Les journaux sont affichés correctement quand j'écris quelque chose dans la barre de recherche, c'est-à chaque fois que j'entre dans une lettre de la console sorties "éléments" ou "pas d'éléments" en fonction de si la liste des éléments ou pas, mais le bouton reste désactivé.
Comment puis-je résoudre ce problème? Ai-je raté 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;
}
}
- console.journal(ce.isEnabled) dans d'autre partie et de voir à quoi son retour
Vous devez vous connecter pour publier un commentaire.
Comme nous en avons parlé dans les commentaires, merci d'éditer ton post pour y inclure l'ensemble de la méthode où vous définissez les
isEnabled
de la propriété, de sorte que nous puissions comprendre ce qui pourrait se passer, mais en attendant, changer depour
ou ce qui serait équivalent à l'aide de la elvis opérateur:
<button ion-button [disabled]="tagList && tagList.length > 0">Add tag</button>
?isEnabled
propriété?.Vous pouvez désactiver la vérification de la longueur du tableau
Avec ce code, vous aurez besoin de lancer la variable lors de la déclaration d'elle, ou il va jeter une erreur, lors de la déclaration ne
Avec cela, vous pouvez supprimer le
isEnabled
variable et le morceau de code dont le contrôle s'il a des éléments ou n'en ont pas.Espère que cela aide 😀