启用禁用/更改 json 值 angular 的切换按钮

Question

我想创建一个切换按钮，用于更改 Dom 中的 json 布尔值。我想禁用或启用 div

check: boolean = true;
  
  
  checkStatus(status) {
    if(status) {
      this.check = false;
    } else {
      this.check = true;
    }
    console.log(status);
  }

{
        id: 1,
        name: 'PV Panels',
        currentP: '100 kW',
        setpp: '100 kW',
        currentq: '2 kVar',
        setq: '2 kVar',
        required: true

    },
    
    
    HTML
    
      <label>
      <td ><input [ngModel]="test" [checked]="check" type="checkbox" (change) = "checkStatus(status)"></td>
</label>

Answer 1

试试这个：

https://stackblitz.com/edit/angular-5xyuaq?file=src%2Fapp%2Fapp.component.ts

TS文件

check: boolean = false;

  checkStatus() {
    this.check = !this.check;
    this.json.required = this.check;
  }

  json = {
        id: 1,
        name: 'PV Panels',
        currentP: '100 kW',
        setpp: '100 kW',
        currentq: '2 kVar',
        setq: '2 kVar',
        required: this.check
  }

HTML 文件

<label>
  <td >
    <input [checked]="this.check"       
    type="checkbox" (change) = "this.checkStatus()">
  </td>
</label>

<div *ngIf="check">
  DIV TO SHOW OR HIDE
</div>

{{ this.json | json }}

启用禁用/更改 json 值 angular 的切换按钮

Toggle button with enabled disabled / change json value angular

json

toggle

angular