Activer/désactiver les boutons Angulaire

Je suis en train de faire une web-app dans angulaire 4 et il y a une question que je suis venu avec.
C'est le suivant:

- Je utiliser une propriété appelée currentLesson. Cette propriété dispose d'un nombre variable de 1 à 6.
Dans mon composant, j'ai une liste de 6 leçons où chaque leçon a son propre bouton pour commencer cette leçon.

Dans cette liste, il ne devrait être disponible à cliquer sur le bouton lorsque le currentLesson a la valeur du numéro de la leçon:

Bouton de la leçon 1 est actif lorsque : currentLesson = 1

Bouton de la leçon 2 est active lorsque : currentLesson = 2

Etc. etc.

Donc si currentLesson = 2, les boutons de la leçon 1, 3, 4, 5 et 6 doivent être désactivés.

J'ai le jeu suivant, mais il ne semble pas fonctionner.
Dans mon composant que j'ai:

export class ClassComponent implements OnInit {
  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]



checkCurrentLesson1 = function(classes) {
if (classes.currentLesson = 1) { 
 return true;
}
else {
 return false;
}
};

checkCurrentLesson2 = function(classes) {
if (classes.currentLesson = 2) {
 return true;
}
else {
 return false;
}
};

Et mon fichier html est comme ceci:

 <ul class="table lessonOverview">
    <li>
      <p>Lesson 1</p>
      <button [routerLink]="['/lesson1']" 
         [disabled]="!checkCurrentLesson1" class="primair">
           Start lesson</button>
    </li>
    <li>
      <p>Lesson 2</p>
      <button [routerLink]="['/lesson2']" 
         [disabled]="!checkCurrentLesson2" class="primair">
           Start lesson</button>
    </li>
 </ul>

(J'ai imprimé uniquement deux des six leçons, mais ils sont tout de même)

Quelqu'un a une solution ou une idée pour moi?

Merci d'avance,

Maarten

InformationsquelleAutor Maarten | 2017-09-24

17

Définir une propriété de la leçon en cours: currentLesson. Il en sera, de toute évidence, le "numéro" de cette leçon. Sur chaque clic sur le bouton, régler la currentLesson valeur de 'nombre'/commande de la touche, c'est à dire pour le premier bouton, il sera le "1", la deuxième " 2 " et ainsi de suite.
Chaque bouton peut être désactivé avec l' [désactivé] attribut, s'il le currentLesson n'est pas la même que celle de l'ordre.

HTML
```
  <button  (click)="currentLesson = '1'"
         [disabled]="currentLesson !== '1'" class="primair">
           Start lesson</button>
  <button (click)="currentLesson = '2'"
         [disabled]="currentLesson !== '2'" class="primair">
           Start lesson</button>
 .....//so on
```
Tapuscrit
```
currentLesson:string;

  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]

constructor(){
  this.currentLesson=this.classes[0].currentLesson
}
```
DÉMO

Mettre le tout dans une boucle:

HTML
```
<div *ngFor="let class of classes; let i = index">
   <button [disabled]="currentLesson !== i + 1" class="primair">
           Start lesson {{i +  1}}</button>
</div>
```
Tapuscrit
```
currentLesson:string;

classes = [
{
  name: 'Lesson1',
  level: 1,
  code: 1,
},{
  name: 'Lesson2',
  level: 1,
  code: 2,
},
{
  name: 'Lesson3',
  level: 2,
  code: 3,
}]
```
DÉMO
- Il a essayé, mais maintenant, tous les boutons sont désactivés; obtenir l'erreur suivante dans la console: ClassComponent.ngfactory.js:139 ERREUR TypeError: Cannot read property 'currentLesson' undefined
- Btw, vous pouvez peut-être expliquer pourquoi vous avez ajouté l' " (cliquez)="currentLesson = '2'" " sur les boutons?
- Merci, claire comme de l'eau maintenant! J'ai aussi une question sur la définition de la propriété 'currentLesson' + 1 quand un autre bouton est cliqué dans une autre composante, mais c'est peut-être le meilleur de ce que je vais faire une nouvelle question pour elle.
InformationsquelleAutor Vega

export class ClassComponent implements OnInit {
  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]


checkCurrentLession(current){

 this.classes.forEach((obj)=>{
    if(obj.currentLession == current){
      return true;
    }

  });
  return false;
}


<ul class="table lessonOverview">
        <li>
          <p>Lesson 1</p>
          <button [routerLink]="['/lesson1']" 
             [disabled]="checkCurrentLession(1)" class="primair">
               Start lesson</button>
        </li>
        <li>
          <p>Lesson 2</p>
          <button [routerLink]="['/lesson2']" 
             [disabled]="!checkCurrentLession(2)" class="primair">
               Start lesson</button>
        </li>
     </ul>

InformationsquelleAutor Suraj Khanal

Vous devez vous connecter pour publier un commentaire.