我正在angular 4中制作一个web应用程序。我使用了一个名为currentLesson的属性。这个属性有一个从1到6的变量。在我的组件中,我有一个包含6节课的列表,每节课都有自己的按钮来开始这节课。
在此列表中,只有当当前课程具有课程编号的值时,才能单击按钮:
第1课按钮在以下情况下激活:当前课程= 1
第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>
(我只打印了六课中的两课,但都是一样的)
有什么办法?
4条答案
按热度按时间icnyk63a1#
设置当前课程的属性:
currentLesson
。很明显,它将保存所选课程的"编号"。每次单击按钮时,将currentLesson
值设置为"编号"/按钮顺序,即第一个按钮为" 1 ",第二个按钮为" 2 ",依此类推。如果currentLesson
与其顺序不同,则可以使用[disabled]属性禁用每个按钮。DEMO
将所有内容放入循环中:
DEMO
x6h2sr282#
my.component.html:
my.component.ts:
ymdaylpp3#
bvk5enib4#