javascript - Schaltflächen mit Angular aktivieren/deaktivieren

Ich erstelle eine Web-App in Angular 4. Ich verwende eine Eigenschaft namens currentLesson. Diese Eigenschaft hat eine variable Zahl von 1 bis 6. In meiner Komponente habe ich eine Liste von 6 Lektionen, wobei jede Lektion ihren eigenen Button hat, um diese Lektion zu starten.

In dieser Liste sollte der Button nur anklickbar sein, wenn currentLesson den Wert der Nummer der Lektion hat:

Schaltfläche von Lektion 1 ist aktiv, wenn: aktuelleLektion=1

Schaltfläche der Lektion 2 ist aktiv, wenn: currentLesson=2

Usw. usw.

Also, wenn currentLesson=2 ist, sollten die Schaltflächen der Lektion 1, 3, 4, 5 und 6 deaktiviert sein.

Ich habe folgendes Setup, aber es scheint nicht zu funktionieren. In meiner Komponente habe ich:

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

Und meine HTML-Datei sieht so aus:

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

(Ich habe nur zwei der sechs Lektionen ausgedruckt, aber sie sind alle gleich)

Was ist die Lösung?

Antwort #1

Setze eine Eigenschaft für die aktuelle Lektion: currentLesson. Sie wird offensichtlich die ‚Nummer‘ der gewählten Lektion enthalten. Bei jedem Klick auf einen Button setze den Wert von currentLesson auf die ‚Nummer‘/Reihenfolge des Buttons, d. h. für den ersten Button wird es ‚1‘, für den zweiten ‚2‘ und so weiter sein. Jeder Button kann jetzt mit dem [disabled]-Attribut deaktiviert werden, wenn currentLesson nicht mit seiner Reihenfolge übereinstimmt.

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

Alles in eine Schleife setzen:

HTML

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

Typescript

currentLesson:string;

classes = [
{
  name: 'Lesson1',
  level: 1,
  code: 1,
},{
  name: 'Lesson2',
  level: 1,
  code: 2,
},
{
  name: 'Lesson3',
  level: 2,
  code: 3,
}]

DEMO