マット・スライド・トグル角度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>

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

    ` 

チェックした変数をチェックして最後の値を保存する.....このコンポーネントを再び開くと、それに応じてこれが表示されます