mat-slide 切换 Angular 4

Question

我有一个面板和一个复选框列表。 当我打开滑块时，它应该在面板内显示列表，当我关闭滑块时，它会关闭所有列表。 但是如何保存滑块切换的此事件，以便如果将其打开，它应该保存此事件，当我返回并单击我的面板时，滑块显示为打开。 如果我关闭滑块并稍后返回它应该关闭，直到我不打开它。

HTML：

 <div class="panel panel-line panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Meb Katmanları</h3> <div class="panel-actions"> <mat-slide-toggle color="warn" [(ngModel)]="allMebLayers" (change)="mebToggle()"></mat-slide-toggle> </div> </div> <div *ngIf="allMebLayers" class="panel-body" style="max-height: 70vh; overflow-y: auto"> <mat-selection-list *ngFor="let l of legends" style="overflow-y: hidden; overflow-x: hidden;"> <mat-checkbox> <td class="p-5" style = "width : 90%" >{{l.layerName}}</td> <td class="p-5"><img [src]="l.legend.imageData"></td> </mat-checkbox> </mat-selection-list> </div> </div>

组件.ts :

 change() { let mebLayers = this.layersOfMap[0]; this.allMebLayers=true; this.mapService.syncFeature2Map(); } mebToggle(){ let mebLayers = this.layersOfMap[0]; for (let m of mebLayers) this.allMebLayers ? m.visible = true : m.visible = false; this.mapService.syncFeature2Map();

Answer 1

对于那些寻找有关滑动开关的一般信息的人：要使用它，您可以将滑块的值绑定到打字稿文件中的变量

在你的 html 中：

<mat-slide-toggle [(ngModel)]="isActive" >Slide me!</mat-slide-toggle>

在您的 .ts 文件中：

isActive: boolean;

Answer 2

        `<div class="panel panel-line panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">Meb Katmanları</h3>
                <div class="panel-actions">
                    <mat-slide-toggle color="warn" [checked]="checked" (ngModelChange)="toggle()"></mat-slide-toggle>
                </div>
            </div>
            <div *ngIf="checked" class="panel-body" style="max-height: 70vh; overflow-y: auto">



                <mat-selection-list *ngFor="let l of legends" style="overflow-y: hidden; overflow-x: hidden;">

                    <mat-checkbox>
                            <td class="p-5" style = "width : 90%" >{{l.layerName}}</td>

                            <td class="p-5"><img [src]="l.legend.imageData"></td>
                    </mat-checkbox>
                </mat-selection-list>


            </div>
        </div>`


    Component Code  

    `
    checked:boolean = false;

    toggle()
    {
    this.checked = !this.checked;
    }

    `

选中变量并保存最后一个选中的值.....当你再次打开这个组件时，它会根据那个显示这个