ファイル

src/app/component/setting/setting.component.ts

実装

OnInit

メタデータ

selector app-setting
styleUrls ./setting.component.css
templateUrl ./setting.component.html

インデックス

プロパティ
メソッド

コンストラクタ

constructor(stateService: StateService, scrollService: ScrollService, bottomSheetRef: MatBottomSheetRef)
パラメータ :
名前 Type オプション
stateService StateService いいえ
scrollService ScrollService いいえ
bottomSheetRef MatBottomSheetRef<SettingComponent> いいえ

メソッド

close
close()
デコレータ :
@Catch()
戻り値 : void
ngOnInit
ngOnInit()
デコレータ :
@Catch()
戻り値 : void
update
update(data)
デコレータ :
@Catch()
パラメータ :
名前 オプション
data いいえ
戻り値 : void

プロパティ

isUpdate
labels
Public scrollService
Type : ScrollService
Public stateService
Type : StateService
subscription
toggleButtonGroup
import {Component, OnDestroy, OnInit} from '@angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
import {MyEvent, StateService} from '../../service/state.service';
import {FormControl, FormGroup} from '@angular/forms';
import {ScrollService} from '../../service/scroll.service';
import {Catch} from '../../class/log.class';


@Component({
    selector: 'app-setting',
    templateUrl: './setting.component.html',
    styleUrls: ['./setting.component.css']
})


export class SettingComponent implements OnInit {
    toggleButtonGroup;
    labels;
    isUpdate;
    subscription;
    constructor(
        public stateService: StateService,
        public scrollService: ScrollService,
        private bottomSheetRef: MatBottomSheetRef<SettingComponent>) {

    }

    @Catch()
    ngOnInit() {
        // フォームグループを生成
        this.toggleButtonGroup = new FormGroup({});

        let setting = this.stateService.state.setting;

        console.dir(setting);
        this.labels = Object.values(setting);
        //フォームコントロールを生成してフォームグループに登録}
        this.labels.forEach(label => {
            this.toggleButtonGroup.addControl(label.name, new FormControl(label.value));
        });

        // 選択の変更検知関数を登録
        this.toggleButtonGroup.valueChanges.subscribe(v => this.update(v));

    }

    @Catch()
    update(data) {
        let setting = this.stateService.state.setting;
        console.dir(setting);
        let buttons = this.toggleButtonGroup.value;
        Object.keys(buttons).forEach(
            key => {
                setting[key].value = buttons[key];
            });
        console.dir(buttons);
        //
        // if(!buttons[0]){
        //   this.scrollService.ADD_LOAD_SIZE=10000;
        //   console.log("@@@ADD_LOAD_SIZE="+this.scrollService.ADD_LOAD_SIZE);
        // }
        // if(!buttons[1]){
        //   this.scrollService.PREFETCH_SIZE=0;
        //   console.log("@@@PREFETCH_SIZE="+this.scrollService.PREFETCH_SIZE);
        // }

    }


    @Catch()
    close() {
        this.bottomSheetRef.dismiss();
    }
}

<mat-nav-list class="myContainer">
  <form [formGroup]="toggleButtonGroup"
        class="myContainer" style="flex-direction: column;flex-wrap:wrap;width:90%;">
    <mat-slide-toggle *ngFor="let label of labels"
                      [formControlName]="label.name">
      {{label.label}}
    </mat-slide-toggle>
  </form>
  <div style="width:10%;">
    <mat-icon (click)="close()" class="myNavButton" style="margin: 0 0 auto auto">
      close
    </mat-icon>

  </div>
</mat-nav-list>

./setting.component.css

凡例
HTML 要素
コンポーネント
HTML と directed を組み合わせて利用

result-matching ""

    該当なし ""