启用/禁用角按钮

Question

我正在用角4制作一个web应用程序，我想出了一个问题。以下内容如下：

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

在此列表中，只有当currentLesson有课程数的值时，才能单击该按钮：

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

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

有谁能给我一个解决方案或想法吗？

提前谢谢你，

马腾

Answer 1

为当前课程设置一个属性：currentLesson。显然，它将包含选课的“数字”。在每次单击按钮时，将currentLesson值设置为按钮的'number'/ order，即对于第一个按钮，它将为'1'，对于第二个'2‘等等。现在，如果每个按钮的currentLesson与其顺序不同，则可以禁用其禁用属性。

  <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

类型标

currentLesson:string;

  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]

constructor(){
  this.currentLesson=this.classes[0].currentLesson
}

演示

把每件事都循环起来：

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

类型标

currentLesson:string;

classes = [
{
  name: 'Lesson1',
  level: 1,
  code: 1,
},{
  name: 'Lesson2',
  level: 1,
  code: 2,
},
{
  name: 'Lesson3',
  level: 2,
  code: 3,
}]

演示

Answer 2

my.component.html：

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

my.component.ts：

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

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

Answer 3

export class ClassComponent implements OnInit {
  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]


checkCurrentLession(current){

 this.classes.forEach((obj)=>{
    if(obj.currentLession == current){
      return true;
    }

  });
  return false;
}


<ul class="table lessonOverview">
        <li>
          <p>Lesson 1</p>
          <button [routerLink]="['/lesson1']" 
             [disabled]="checkCurrentLession(1)" class="primair">
               Start lesson</button>
        </li>
        <li>
          <p>Lesson 2</p>
          <button [routerLink]="['/lesson2']" 
             [disabled]="!checkCurrentLession(2)" class="primair">
               Start lesson</button>
        </li>
     </ul>