我正在制作一个 angular 4 的网络应用程序。我使用一个名为 currentLesson 的属性。这个属性有一个从 1 到 6 的可变数字。 在我的组件中,我有一个包含 6 节课的列表,其中每节课都有自己的按钮来开始这节课。
在此列表中,只有当 currentLesson 的值为类(class)编号时,才能单击按钮:
第 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>
(我只打印了六课中的两课,但都是一样的)
解决方案是什么?
最佳答案
为当前类(class)设置一个属性:currentLesson
。显然,它将保存所选类(class)的“编号”。每次单击按钮时,将 currentLesson
值设置为按钮的“编号”/顺序,即第一个按钮为“1”,第二个按钮为“2”,依此类推。
如果 currentLesson
与其顺序不同,现在可以使用 [disabled] 属性禁用每个按钮。
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
typescript
currentLesson:string;
classes = [
{
name: 'string',
level: 'string',
code: 'number',
currentLesson: '1'
}]
constructor(){
this.currentLesson=this.classes[0].currentLesson
}
将所有内容放在一个循环中:
HTML
<div *ngFor="let class of classes; let i = index">
<button [disabled]="currentLesson !== i + 1" class="primair">
Start lesson {{i + 1}}</button>
</div>
typescript
currentLesson:string;
classes = [
{
name: 'Lesson1',
level: 1,
code: 1,
},{
name: 'Lesson2',
level: 1,
code: 2,
},
{
name: 'Lesson3',
level: 2,
code: 3,
}]
关于javascript - 使用 Angular 启用/禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46390207/