至于下面张贴的html代码，它被链接到一个按钮，以便当按钮被点击时，它设置showVisOptionsLayout为真，因此下面张贴的html代码出现。我面临的问题是，当我点击那个按钮时，.ts代码被调用，并且init()被调用“如下面所示”，导致复选框被初始化。我想要实现的是，以保持复选框的状态，即使init()被调用。换句话说，让我们考虑以下情况：
1-用户点击按钮附加belwo posted html代码
2-将调用init()方法
3-因此，将取消选中所有复选框
4-用户选择选中第一个复选框“iVisualizationOperationPasser.areaOfCoverage”
5-作为步骤4的结果，复选框将被选中，菜单将消失“它将消失，因为我这样设计它”
6-当用户再次点击附在下面的'html'上的按钮时，init()方法将被调用，并且所有复选框将被取消选中。因此，复选框iVisualizationOperationPasser.areaOfCoverage被设置为真的最新状态将丢失。
我想保持复选框的最新状态，即使下面粘贴的html的按钮被调用。我想实现复选框可以被取消选中，只有当用户选择这样做时
请让我知道即使init()被调用几次，如何保持复选框的最新状态

注

for each clikc on the button attached to the below posted `html`, once `showVisOptionsLayout` will be `true causing `init()` to be invoked, and when it is clicked again it will cause `showVisOptionsLayout` to be set to `false`,hence all the check-boxes will be set
to false. 
each time the button is clicked, it toggles that state of `showVisOptionsLayout`

超文本标记语言：

<div id="idMainContainer" *ngIf="showVisOptionsLayout">
<div id=idDivider1>
    <hr class="solid">
</div>

<clr-checkbox-container id="idCheckBoxContainer">
    <clr-checkbox-wrapper id="idDWrapperForAreaOfCoveragecheckbox">
        <input [value]="1" [(ngModel)]="iVisualizationOperationPasser.areaOfCoverage" name="checkboxGroupForVisualizationOption" type="checkbox" clrCheckbox  (click)="onOpAreaOfCoverageSelected($event)" [checked]="showAreaOfCoverageOption"/>
            <label id="idLabelVisOpAreaOfCoverageTitle">
                {{ "VISUALIZATION_OPTION.AREA_OF_COVERAGE" | translate }} 
            </label>
    </clr-checkbox-wrapper>
   
    <clr-checkbox-wrapper id="idDWrapperForAverageHeightscheckbox">
        <input [value]="2" [(ngModel)]="iVisualizationOperationPasser.averageHeights" name="checkboxGroupForVisualizationOption" type="checkbox" clrCheckbox  (click)="onOpAverageHeightsSelected($event)" [checked]="showAverageHeightsOption"/>
            <label id="idLabelVisOpAverageHeightsTitle">
                {{ "VISUALIZATION_OPTION.AVERAGE_HEIGHTS" | translate }} 
            </label>
    </clr-checkbox-wrapper>
    <clr-checkbox-wrapper id="idDWrapperForInterceptioncheckbox">
        <input [value]="3" [(ngModel)]="iVisualizationOperationPasser.interception" name="checkboxGroupForVisualizationOption" type="checkbox" clrCheckbox  (click)="onOpInterceptionSelected($event)" [checked]="showInterceptionOption"/>
            <label id="idLabelVisOpInterceptionTitle">
                {{ "VISUALIZATION_OPTION.INTERCEPTION" | translate }} 
            </label>
    </clr-checkbox-wrapper>
    <!-- <clr-checkbox-wrapper id="idDWrapperForEndangeredAreascheckbox">
        <input [value]="4" [(ngModel)]="iVisualizationOperationPasser.EndangeredAreas" name="checkboxGroupForVisualizationOption" type="checkbox" clrCheckbox  (click)="onOpEndangeredAreasSelected($event)" [checked]="showEndangeredAreasOption"/>
            <label id="idLabelVisOpEndangeredAreasTitle">
                {{ "VISUALIZATION_OPTION.ENDANGERED_AREAS" | translate }} 
            </label>
    </clr-checkbox-wrapper> -->
</clr-checkbox-container>

<div id=idDivider2>
    <hr class="solid">
</div>

ngOnInit（）

ngOnInit(): void {
console.log("ngOnInit")
this.init()
}

private init(){

    this.iVisualizationOperationPasser.areaOfCoverage = false
    this.iVisualizationOperationPasser.averageHeights = flse
    this.iVisualizationOperationPasser.interception = false

}