Estoy haciendo una aplicación web en angular 4 y se me ocurrió una pregunta. Es lo siguiente:
Utilizo una propiedad llamada currentLesson. Esta propiedad tiene un número variable de 1 a 6. En mi componente tengo una lista de 6 lecciones donde cada lección tiene su propio botón para comenzar esta lección.
En esta lista solo debería estar disponible hacer clic en el botón cuando la lección actual tenga el valor del número de la lección:
El botón de la lección 1 está activo cuando: currentLesson = 1
El botón de la lección 2 está activo cuando: currentLesson = 2
Etc. etc.
Entonces, si currentLesson = 2, los botones de la lección 1, 3, 4, 5 y 6 deben estar deshabilitados.
Tengo la siguiente configuración, pero no parece funcionar. En mi componente tengo:
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;
}
};
Y mi archivo html es así:
<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>
(Solo imprimí dos de las seis lecciones, pero todas son iguales)
¿Alguien tiene una solución o idea para mí?
Gracias por adelantado,
Maarten
Establecer una propiedad de la lección actual: currentLesson. Obviamente, contendrá el 'número' de la lección elegida. En cada clic de botón, establezca el currentLessonvalor en 'número' / orden del botón, es decir, para el primer botón, será '1', para el segundo '2' y así sucesivamente. Cada botón ahora se puede deshabilitar con el atributo [deshabilitado], si no currentLessones el mismo que su orden.
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
Mecanografiado
currentLesson:string;
classes = [
{
name: 'string',
level: 'string',
code: 'number',
currentLesson: '1'
}]
constructor(){
this.currentLesson=this.classes[0].currentLesson
}
Poniendo todo en un bucle:
HTML
<div *ngFor="let class of classes; let i = index">
<button [disabled]="currentLesson !== i + 1" class="primair">
Start lesson {{i + 1}}</button>
</div>
Mecanografiado
currentLesson:string;
classes = [
{
name: 'Lesson1',
level: 1,
code: 1,
},{
name: 'Lesson2',
level: 1,
code: 2,
},
{
name: 'Lesson3',
level: 2,
code: 3,
}]
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras