大佬教程收集整理的这篇文章主要介绍了使用Angular启用/禁用按钮,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用了一个名为currentLesson的属性.此属性的变量编号为1到6.
在我的组件中,我有一个包含6个课程的列表,每个课程都有自己的按钮来开始本课程.
在此列表中,只有当currentLesson具有课程编号的值时才能单击该按钮:
在以下情况下,第1课的按钮处于活动状态:currentLesson = 1
第2课的按钮在以下情况下处于活动状态:currentLesson = 2
等等
因此,如果currentLesson = 2,则应禁用第1,3,4,5和6课的按钮.
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; } };
<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>
(我只打印了六节课中的两节,但它们都是一样的)
有没有人为我提供解决方案或想法?
提前致谢,
马腾
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
打字稿
currentLesson:string; classes = [ { name: 'String',currentLesson: '1' }] constructor(){ this.currentLesson=this.classes[0].currentLesson }
以上是大佬教程为你收集整理的使用Angular启用/禁用按钮全部内容,希望文章能够帮你解决使用Angular启用/禁用按钮所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。