我正在制作一个角度为4的网络应用程序,我想出了一个问题.
它是以下内容：
它是以下内容：
我使用了一个名为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;
}
};
我的html文件是这样的：
<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>
(我只打印了六节课中的两节,但它们都是一样的)
有没有人为我提供解决方案或想法？
提前致谢,
马腾
解决方法
为当前课程设置属性：currentLesson.显然,这将是选择课程的“数量”.在每个按钮单击时,将currentLesson值设置为按钮的“数字”/顺序,即对于第一个按钮,它将为“1”,对于第二个“2”,依此类推.
现在可以使用[disabled]属性禁用每个按钮,如果currentLesson与其顺序不同.
现在可以使用[disabled]属性禁用每个按钮,如果currentLesson与其顺序不同.
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
}
