web-dev-qa-db-fra.com

Activer/désactiver les boutons avec Angular

Je crée une application Web en mode angulaire 4 et il y a une question à propos de laquelle j'ai… .. C'est la suivante:

J'utilise une propriété appelée currentLesson. Cette propriété a un nombre variable de 1 à 6. Dans ma composante, j'ai une liste de 6 leçons, chaque leçon ayant son propre bouton pour commencer cette leçon.

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

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

Le bouton de la leçon 2 est actif lorsque: currentLesson = 2

Etc.

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

J'ai la configuration suivante mais cela ne semble pas fonctionner . Dans mon composant, 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 ça:

 <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>

(Je n'ai imprimé que deux des six leçons, mais elles sont toutes identiques)

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

Merci d'avance,

Maarten

angulartypescriptbuttonproperties
4
Maarten

Définissez une propriété pour la leçon en cours: currentLesson. Il contiendra évidemment le "numéro" de la leçon choisie. Sur chaque clic de bouton, définissez la valeur currentLesson sur 'numéro'/ordre du bouton, c’est-à-dire que pour le premier bouton, il sera '1', pour le second '2' et ainsi de suite. désactivé avec l'attribut [disabled], si la currentLesson n'est pas identique à son 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

TypeScript

currentLesson:string;

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

constructor(){
  this.currentLesson=this.classes[0].currentLesson
}

DEMO

9
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>
0
Suraj Khanal