Je travaille avec Angular 7 et je souhaite changer le texte sur le bouton à chaque fois que je clique dessus, il doit être connecté ou déconnecté
Je mets mon code ci-dessous:
ts file:
<button type="button"> {{text}}</button>
Une alerte non définie arrive
fichier html:
export class HeaderComponent implements OnInit {
text: any;
constructor() {
this.loadDataFromApi();
}
ngOnInit() {
if (this.token == null) {
this.text == 'login';
alert(this.text);
} else if (this.token) {
this.token == 'logout';
alert(this.text);
}
}
}
5 Réponses :
Vous utilisez un opérateur de comparaison ( == ) au lieu de l'opérateur d'affectation ( = ). Changez cela et cela devrait fonctionner correctement. Quelque chose comme ceci:
export class HeaderComponent implements OnInit {
text: any;
constructor() {}
ngOnInit() {
this.loadDataFromApi();
if (this.token) {
this.text = 'logout';
alert(this.text);
} else {
this.text = 'login';
alert(this.text);
}
}
}
PS: this.loadDataFromApi est très probablement async dans la nature et le code ci-dessous cet appel serait exécuté sans l'attendre, conduisant ainsi à un comportement inattendu. Ainsi, dans la plupart des cas, vous obtiendrez login dans l'alerte.
J'ai essayé avec votre sollution mais je reçois toujours un ngOnInit () {if (this.token == null) {alert (1); this.text = 'connexion'; alert (this.text); } else if (this.token) {alert ('2'); this.token = 'déconnexion'; alert (this.text); }}
@TestingAnurag, vérifiez la réponse mise à jour. Vous aviez this.token au lieu de this.text dans votre condition else .
Vous devez utiliser l'opérateur d'affectation = au lieu de l'opérateur de comparaison ==
this.text ='login';
export class HeaderComponent implements OnInit {
text: any;
constructor( );
this.loadDataFromApi();
}
ngOnInit() {
if(this.token == null){
this.text ='login';
alert(this.text);
} else if (this.token){
this.token = 'logout';
alert(this.text);
}
}
J'ai essayé avec votre sollution mais je reçois toujours un ngOnInit () {if (this.token == null) {alert (1); this.text = 'connexion'; alert (this.text); } else if (this.token) {alert ('2'); this.token = 'déconnexion'; alert (this.text); }}
essayez, au lieu de this.token == null essayez ! this.token (ceci vérifie si undefiend ainsi que null et c'est la manière recommandée)
if(!this.token){
this.text = 'login';
alert(this.text);
} else if (this.token){
this.text== 'logout';
alert(this.text);
}
Après else , vous modifiez this.token et non this.text .
De plus, vous devez utiliser = , pas == pour attribuer this.text . Changez votre code comme ça:
ngOnInit() {
if (this.token === null) {
this.text = 'login';
alert(this.text);
} else if (this.token) {
this.text = 'logout';
alert(this.text);
}
}
PS : Où est définie votre variable token ? Je ne peux pas le voir dans votre fichier .ts .
Fondamentalement, vous vérifiez si le jeton d'authentification est là, alors vous créez le texte comme déconnexion et le jeton n'est pas leur show login.
Dans votre cas, il semble que ce jeton ne soit pas défini par défaut
c'est pourquoi dans l'alerte il affiche undefined.
Deux conditions ne fonctionneront pas
cela devrait ressembler à
if (this.token) {//The user is logged in so log out should show.
this.text = 'logout';
alert(this.text);
} else {//The user is logged out in so login should show
this.token == 'logout';
alert(this.text);
}
le jeton est déclaré dans le fichier ts
Il semble manquer la variable de jeton.
this.token == 'déconnexion'; est une faute de frappe, cela devrait être this.token = 'logout';
pouvez-vous essayer une solution
pourquoi doubler (==) égal pour assigner?
this.token je ne vois pas cela défini dans votre fichier component.ts