Question

我正在以角度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>

（我只打印了六个课程中的两个，但它们都是一样的）

有没有人为我提供解决方案或想法？

提前致谢，

马腾

Answer 1

为当前课程设置属性：currentLesson。显然，这将是选择课程的“数量”。在每个按钮上单击，将currentLesson值设置为“数字”/按钮的顺序，即对于第一个按钮，它将为“1”，对于第二个“2”，依此类推。现在可以使用[禁用]属性禁用每个按钮，如果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
}

DEMO

将所有内容置于循环中：

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

DEMO

Answer 2

Complete output from command python setup.py egg_info:
Traceback (most recent call last):
  File "<string>", line 1, in <module>
  File "/private/var/folders/sz/62b931pd5zjbclx2fzpkww1w0000gn/T/pip-build-0vb25t/pyautogui/setup.py", line 6, in <module>
    version=__import__('pyautogui').__version__,
  File "pyautogui/__init__.py", line 110, in <module>
    from . import _pyautogui_osx as platformModule
  File "pyautogui/_pyautogui_osx.py", line 7, in <module>
    assert False, "You must first install pyobjc-core and pyobjc: https://pyautogui.readthedocs.io/en/latest/install.html"
AssertionError: You must first install pyobjc-core and pyobjc: https://pyautogui.readthedocs.io/en/latest/install.html

Answer 3

const weirdSum = (num) => {
  let result = 0;    
  const split = num.toString().split('');

  if(split.length > 1){
    for(let i=0;i<split.length;i++){
      result = result + (split[i]*1);
    }           
    return weirdSum(result); // pass result as argument, which will be     split.
  }

  return num; // return result if split.length is 1
}

console.log(weirdSum(84));

Answer 4

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

使用Angular启用/禁用按钮

4 个答案: