我正在用 Angular 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>
(我只打印了六节课中的两节,但都是一样的)
有没有人对我有解决方案或想法?
提前致谢,
马丁
原文由 Maarten 发布,翻译遵循 CC BY-SA 4.0 许可协议
为当前课程设置一个属性:
currentLesson
。显然,它将保留所选课程的“数字”。在每次单击按钮时,将currentLesson
值设置为按钮的“数字”/顺序,即第一个按钮为“1”,第二个为“2”,依此类推。现在可以使用 [disabled] 属性禁用每个按钮,如果currentLesson
与其顺序不同。HTML
打字稿
演示
把所有东西都放在一个循环中:
HTML
打字稿
演示