javascript 启用/禁用Angular 按钮

moiiocjp  于 2022-12-21  发布在  Java
关注(0)|答案(4)|浏览(210)

我正在angular 4中制作一个web应用程序。我使用了一个名为currentLesson的属性。这个属性有一个从1到6的变量。在我的组件中,我有一个包含6节课的列表,每节课都有自己的按钮来开始这节课。
在此列表中,只有当当前课程具有课程编号的值时,才能单击按钮:
第1课按钮在以下情况下激活:当前课程= 1
第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>

(我只打印了六课中的两课,但都是一样的)
有什么办法?

icnyk63a

icnyk63a1#

设置当前课程的属性:currentLesson。很明显,它将保存所选课程的"编号"。每次单击按钮时,将currentLesson值设置为"编号"/按钮顺序,即第一个按钮为" 1 ",第二个按钮为" 2 ",依此类推。如果currentLesson与其顺序不同,则可以使用[disabled]属性禁用每个按钮。

    • 超文本标记语言**
<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
将所有内容放入循环中:

    • 超文本标记语言**
<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

x6h2sr28

x6h2sr282#

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

ymdaylpp3#

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

bvk5enib4#

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

相关问题