我正在使用 Angular 4 制作一个 Web 应用程序。我使用一个名为 currentLesson 的属性,此属性的变量数字从 1 到 6 不等。 在我的组件中,我有一个包含 6 个课程的列表,每个课程都有自己的按钮来启动该课程。
在这个列表中,只有当 currentLesson 的值等于课程编号时才能点击按钮:
当 currentLesson = 1 时,课程 1 的按钮是活动状态
当 currentLesson = 2 时,课程 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>
(我只印了其中两课,但它们都是相同的)
解决办法是什么?