매트 슬라이드 토글 각도 4

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

 `<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; 
    } 

    ` 

마지막으로 체크 된 값을 저장하여 검사 된 변수 .....이 구성 요소를 다시 열면

에 따라이 변수가 표시됩니다.