使用Angular启用/禁用按钮

Question

我正在使用 Angular 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>

（我只印了其中两课，但它们都是相同的）

解决办法是什么？

- Maarten

Answer 1

为当前课程设置一个属性：currentLesson。它将明显保存所选课程的“编号”。在每次按钮单击时，将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

类型脚本

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

演示

- Vega

---

谢谢，现在清晰明了了！我还有一个关于在其他组件中点击另一个按钮时设置属性“currentLesson”+1的问题，但也许最好我会为此提出一个新问题。 - Maarten

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

- Gene

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>

- Suraj Khanal

Answer 4

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

- Felipe Clemente

---

你需要提供解释。仅仅复制粘贴代码块会导致人们盲目复制代码而无法理解代码的含义。 - AmazingTurtle