使用 Angular 启用/禁用按钮

新手上路,请多包涵

我正在用 Angular 4 制作一个网络应用程序,我想出了一个问题。如下:

我使用了一个名为 currentLesson 的属性。这个属性有一个从 1 到 6 的可变数字。在我的组件中,我有一个包含 6 节课的列表,其中每节课都有自己的按钮来开始这节课。

在此列表中,只有当 currentLesson 具有课程编号的值时才能单击按钮:

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

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

有没有人对我有解决方案或想法?

提前致谢,

马丁

原文由 Maarten 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 796
2 个回答

为当前课程设置一个属性: currentLesson 。显然,它将保留所选课程的“数字”。在每次单击按钮时,将 currentLesson 值设置为按钮的“数字”/顺序,即第一个按钮为“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

打字稿

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>

打字稿

currentLesson:string;

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

演示

原文由 Vega 发布,翻译遵循 CC BY-SA 4.0 许可协议

我的.component.html:

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

我的.component.ts:

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

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

原文由 Gene 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题