web-dev-qa-db-ja.com

Angularでボタンを有効/無効にします

angular 4でWebアプリを作成していますが、思いついた質問があります。次のとおりです。

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>

（6つのレッスンのうち2つだけを印刷しましたが、すべて同じです）

誰かが私に解決策やアイデアを持っていますか？

前もって感謝します、

マールテン

angulartypescriptbuttonproperties
8
Maarten

現在のレッスンのプロパティを設定します：currentLesson。明らかに、選択したレッスンの「数」を保持します。ボタンをクリックするたびに、currentLesson値を「番号」/ボタンの順序に設定します。つまり、最初のボタンの場合は「1」、2番目の「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

TypeScript

currentLesson:string;

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

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

[〜＃〜] demo [〜＃〜]

すべてをループに入れる：

[〜＃〜] 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,
}]

[〜＃〜] demo [〜＃〜]

20
Vega
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>
0
Suraj Khanal