Question

我是Angular的新手，我不知道该怎么做。我有这些按钮：

<button *ngIf="entryControlEnabled && !gateOpen" class="bottomButton red" (click)="openGate()">Open</button>
<button *ngIf="entryControlEnabled && gateOpen" class="bottomButton green" (click)="closeGate()">Close</button>

在.ts文件中，我有这个：

if (data.IoNumber == config.IoNumberGates) {
 if (data.IoStatus == "DetectorDeactivated") {
  this.gateOpen = true;
  } else {
  this.gateOpen = false;
  }
}

我想将data.IoStatus == "DetectorDeactivated"更改为data.IoStatus == "DetectorActivated"

我想说明一下我的意思：

openGate(){
 this.data.IoStatus == "DetectorActivated"
}

closeGate(){
 this.data.IoStatus == "DetectorDeactivated"
}

有人可以帮我吗？

Answer 1

假设您要将变量this.gateOpen切换为true或false，并且this.gateOpen，openGate和closeGate属于同一组件。您的函数应如下所示。

openGate(){
 // this.data.IoStatus == "DetectorActivated";
 // it's wrong, this is comparison not assignement
 this.data.IoStatus = "DetectorActivated";
}

closeGate(){
 // this.data.IoStatus == "DetectorDeactivated";
 // it's wrong, this is comparison not assignement
 this.data.IoStatus = "DetectorDeactivated";
}

希望有帮助

if (data.IoNumber == config.IoNumberGates) {
    if (data.IoStatus == "DetectorDeactivated") {
      this.gateOpen = true;
    } else {
      this.gateOpen = false;
    }
}

确保此代码在正确的事件上运行，在您的情况下，应为click事件或类似事件。否则，只需在这样的函数中直接更改this.gateOpen变量即可。

openGate(){
    this.gateOpen = true;
}

closeGate(){
    this.gateOpen = false;
}

Answer 2

使用滑动/切换开关会更容易。下面我正在使用Angular Material Slide Toggle。

查看：

<mat-slide-toggle #approve (change)="toggle($event)" [labelPosition]="'before'">
            {{approve.checked? "Detector Activated": "Detector Activate"}}</mat-slide-toggle>

组件：

toggle(event: MatSlideToggleChange) {
  console.log('Toggle fired');
  if(event.checked)
     this.data.IoStatus = "DetectorActivated";
  else
     this.data.IoStatus = "DetectorActivated";
}

角按钮单击

2 个答案: