javascript - 使用 Angular 启用/禁用按钮

Question

我正在制作一个 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>

(我只打印了六课中的两课，但都是一样的)

解决方案是什么？

Answer 1

为当前类(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
}

DEMO

将所有内容放在一个循环中:

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,
}]

DEMO