Question

component.html

<div class="col-lg-6">
    <div class="form-check position-absolute">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" [checked] = true >
    </div>
    <app-stackbar-chart [data]="exp_month_data"></app-stackbar-chart>
    <app-stackbar-chart [data]="exp_data_performance"></app-stackbar-chart>
</div>

问题描述

我要在选中和取消选中该复选框时切换这两个div（app-stackbar-chart）

Answer 1

component.ts

//declare variable for chacked/unchecked

isChecked:boolean = true;

component.ts

<div class="col-lg-6">
    <div class="form-check position-absolute">
        <input type="checkbox" (change)="isChecked =! isChecked" class="form-check-input" id="exampleCheck1" [checked] = true >
    </div>
    <app-stackbar-chart *ngIf="isChecked" [data]="exp_month_data"></app-stackbar-chart>
    <app-stackbar-chart *ngIf="!isChecked" [data]="exp_data_performance"></app-stackbar-chart>
</div>

div切换复选框的选中和未选中角度6

1 个答案: