Question

我有一个面板和一个复选框列表。当我打开滑块时，它应显示面板内的列表，当我关闭滑块时，它会关闭所有列表。但是如何保存Slider-toggle的这个事件，所以如果让它打开，它应该保存这个事件，当我回来并点击我的面板时，滑块显示为打开。如果我让滑块关闭然后再回来它应该关闭，直到我不打开它。

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>

Component.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;
    }

    `

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

mat-slide toggle Angular 4

2 个答案: