div在复选框上切换选中和未选中角度6答案

【问题标题】：div toggle on checkbox checked and unchecked angular 6div在复选框上切换选中和未选中角度6
【发布时间】：2019-03-22 18:44:15
【问题描述】：

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)

【问题讨论】：

您可以为此使用 *ngIf。像 *ngIf="!checked" 这样的东西。
我试过了，但它不起作用..你能发布我应该如何实现
请参考这个链接可能对你有帮助stackoverflow.com/questions/50946102/toggle-div-with-angular-6

标签： angular6

【解决方案1】：

组件.ts

//declare variable for chacked/unchecked

isChecked:boolean = true;

组件.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>

【讨论】：