Javascript 启用/禁用带角度的按钮

我正在angular 4中制作一个web应用程序，我提出了一个问题。 以下是：

我使用一个名为currentLesson的属性。此属性的变量数为1到6。 在我的组件中，我有一个6节课的列表，其中每节课都有自己的开始本课的按钮

在此列表中，只有当前课程具有课程编号的值时，才能单击按钮：

当：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>

第1课

开始上课


第二课

开始上课

（我只打印了六节课中的两节，但都是一样的）

有人给我一个解决方案或想法吗

提前感谢,

---

Maarten

为当前课程设置属性：

currentLesson

。很明显，它将容纳精选课程的“数字”。在每次单击按钮时，将

currentLesson

值设置为按钮的'number'/顺序，即对于第一个按钮，它将是'1'，对于第二个'2'，依此类推。 现在可以使用[disabled]属性禁用每个按钮，前提是

currentLesson

与其顺序不同

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

<div *ngFor="let class of classes; let i = index">
   <button [disabled]="currentLesson !== i + 1" class="primair">
           Start lesson {{i +  1}}</button>
</div>

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

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

<div *ngFor="let class of classes; let i = index">
   <button [disabled]="currentLesson !== i + 1" class="primair">
           Start lesson {{i +  1}}</button>
</div>

导出类ClassComponent实现OnInit{
类别=[
{
名称：“字符串”，
级别：“字符串”，
代码：'编号'，
当前课程：“1”
}]
checkCurrentLession（当前）{
this.classes.forEach（（obj）=>{
if（obj.currentLession==当前）{
返回true；
}
});
返回false；
}


第1课

开始上课


第二课

开始上课

pagar的总产量={{getTotal（）}}{{getResult（）| currency}}
佩迪多河

my.component.html：

<button [disabled]="isSubmitBtnDisabled" (click)="addGame()">Send</button>

---

尝试过，但现在所有按钮都被禁用；在控制台中出现以下错误：ClassComponent.ngfactory.js:139错误类型错误：无法读取undefinedBtw的属性“CurrentLessue”，您可以解释一下为什么添加“（单击）=“CurrentLessue='2'”关于按钮？谢谢，现在很清楚！我还有一个问题，关于在其他组件中单击其他按钮时设置属性“currentLesson”+1，但最好是我为它提出一个新问题。你也应该提供一个解释。只有粘贴代码块才会导致人们复制粘贴代码而不使用u理解它。

    <div class="col-md-12">
      <p style="color: #28a745; font-weight: bold; font-size:25px; text-align: right " >Total Productos a pagar= {{ getTotal() }} {{ getResult() | currency }}
      <button class="btn btn-success" type="submit" [disabled]="!getResult()" (click)="onSubmit()">
        Ver Pedido
      </button>
     </p>
    </div>

<button [disabled]="isSubmitBtnDisabled" (click)="addGame()">Send</button>

export class My implements OnInit {
  isSubmitBtnDisabled: boolean= false;

   private someMethodYouCalled() {
      this.isSubmitBtnDisabled = true;   //Controls if button is disabled
   }
}