Question

我正在尝试在调用click事件时调用函数的角度4中创建一个切换。

toggle() {

    alert('toggle case 1') 

    else

    alert('toggle case 2');

}

然后在.ts文件中我想要这样的东西：

var groupPage = dbCtx.StatusViewList.Select(x => TurbineNumber)
                  .Distinct().OrderBy(x => x.TurbineNumber).Skip(40).Take(20).ToList();

var data = dbCtx.StatusViewList.Where(x => groupPage.Contains(x.TurbineNumber))
                  .ToList().GroupBy(x => x.TurbineNumber).ToList();

基本上我想要有两种不同的动作......我该怎么做？

Answer 1

如果您只需要切换一个简单的布尔值，您可以执行以下操作：

<button (click)="toggle()">Toggle Button</button>

class MyComponent {
  isToggled: boolean;

  toggle() {
    this.isToggled = !this.isToggled;
  }
}

然后，如果需要，您可以在视图中使用isToggled。

对于更复杂的内容，您可以像这样展开toggle()方法：

toggle() {
  this.isToggled = !this.isToggled;

  if (this.isToggled) {
    // do something, we've just been toggled on
  } else {
    // do something else, we've just been toggled off
  }
}

Answer 2

您应该在组件中声明一个布尔值，并按其值进行操作。

<button (click)="toggle()">Toggle Button</button>

toggleFlag:boolean=false;

toggle() {
    this.toggleFlag=!this.toggleFlag;
    if(this.toggleFlag)
       alert('toggle case 1')     
    else
       alert('toggle case 2');
}

Answer 3

您的模板

<button (click)="toggle()">Toggle Button</button>

.ts文件

button_clicked = false;

toggle() {
    this.button_clicked = !this.button_clicked;
    if(this.button_clicked) 
    { 
        // call function 1 
    } 
    else 
    { 
        // call function 2
    }
}

Angular 2+创建2个不同案例的切换

3 个答案: