src/app/component/setting/setting.component.ts
selector | app-setting |
styleUrls | ./setting.component.css |
templateUrl | ./setting.component.html |
プロパティ |
|
メソッド |
constructor(stateService: StateService, scrollService: ScrollService, bottomSheetRef: MatBottomSheetRef
|
||||||||||||
パラメータ :
|
close |
close()
|
デコレータ :
@Catch()
|
戻り値 :
void
|
ngOnInit |
ngOnInit()
|
デコレータ :
@Catch()
|
戻り値 :
void
|
update | ||||
update(data)
|
||||
デコレータ :
@Catch()
|
||||
パラメータ :
戻り値 :
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