src/app/component/list/list.component.ts
selector | app-list |
styleUrls | ./list.component.css |
templateUrl | ./list.component.html |
プロパティ |
|
メソッド |
|
constructor(scrollService: ScrollService, router: Router, dialog: MatDialog, dataService: DataService, stateService: StateService, changeDetectorRef: ChangeDetectorRef)
|
|||||||||||||||||||||
Defined in src/app/component/list/list.component.ts:19
|
|||||||||||||||||||||
パラメータ :
|
clickFavoriteButton | ||||
clickFavoriteButton(doc)
|
||||
デコレータ :
@Catch()
|
||||
Defined in src/app/component/list/list.component.ts:71
|
||||
パラメータ :
戻り値 :
void
|
Async deleteDoc | ||||
deleteDoc(doc)
|
||||
デコレータ :
@Catch()
|
||||
Defined in src/app/component/list/list.component.ts:88
|
||||
パラメータ :
戻り値 :
any
|
Async init |
init()
|
デコレータ :
@Catch()
|
Defined in src/app/component/list/list.component.ts:49
|
戻り値 :
any
|
ngOnDestroy |
ngOnDestroy()
|
Defined in src/app/component/list/list.component.ts:103
|
戻り値 :
void
|
ngOnInit |
ngOnInit()
|
デコレータ :
@Catch()
|
Defined in src/app/component/list/list.component.ts:43
|
戻り値 :
void
|
onScroll | ||||
onScroll(event)
|
||||
Defined in src/app/component/list/list.component.ts:66
|
||||
パラメータ :
戻り値 :
void
|
Async openDialog | ||||
openDialog(doc)
|
||||
デコレータ :
@Catch()
|
||||
Defined in src/app/component/list/list.component.ts:93
|
||||
パラメータ :
戻り値 :
any
|
Async refresh |
refresh()
|
デコレータ :
@Catch()
|
Defined in src/app/component/list/list.component.ts:59
|
戻り値 :
any
|
resize |
resize()
|
Defined in src/app/component/list/list.component.ts:54
|
戻り値 :
void
|
trackByFn | ||||||
trackByFn(index, doc)
|
||||||
デコレータ :
@Catch()
|
||||||
Defined in src/app/component/list/list.component.ts:83
|
||||||
パラメータ :
戻り値 :
any
|
Public dataService |
Type : DataService
|
Defined in src/app/component/list/list.component.ts:26
|
Public dialog |
Type : MatDialog
|
Defined in src/app/component/list/list.component.ts:25
|
Public scrollService |
Type : ScrollService
|
Defined in src/app/component/list/list.component.ts:23
|
Public stateService |
Type : StateService
|
Defined in src/app/component/list/list.component.ts:27
|
subscription |
Type : []
|
既定値 : []
|
Defined in src/app/component/list/list.component.ts:19
|
import {ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {DataService} from '../../service/data.service';
import {Router} from '@angular/router';
import {MatDialog} from '@angular/material';
import {DetailDialogComponent} from '../detail/detail.dialog';
import {ScrollService} from '../../service/scroll.service';
import {MyEvent, StateService} from '../../service/state.service';
import {Subscription} from 'rxjs';
import {Catch} from '../../class/log.class';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit, OnDestroy {
// @ViewChild("dataList") dataList: ElementRef;
subscription = [];
constructor(
public scrollService: ScrollService,
private router: Router,
public dialog: MatDialog,
public dataService: DataService,
public stateService: StateService,
private changeDetectorRef: ChangeDetectorRef,
) {
this.subscription.push(
this.stateService.subscribe
(MyEvent.DB_UPDATE, (() => {
this.refresh();
})));
this.subscription.push(
this.stateService.subscribe
(MyEvent.RESIZE, (() => {
this.resize();
})));
}
@Catch()
ngOnInit() {
this.init();
}
//初期表示データ取得
@Catch()
async init() {
await this.scrollService.init();
}
resize() {
this.scrollService.resize();
}
@Catch()
async refresh() {
let hash = await this.dataService.getFavoriteId();
this.scrollService.docs.forEach(doc => doc.isFavorite = !!hash[doc._id]);
this.changeDetectorRef.detectChanges();
console.log('@@@ 同期を表示に反映');
}
onScroll(event) {
this.scrollService.update();
}
@Catch()
clickFavoriteButton(doc) {
// try {
let res = doc.isFavorite ? this.dataService.deleteFavorite(doc) : this.dataService.saveFavorite(doc);
doc.isFavorite = !doc.isFavorite;
// } catch (error) {
// throw new Error("お気に入り更新失敗" + error.message);
// }
}
@Catch()
trackByFn(index, doc) {
return doc.serial; // or item.id
}
@Catch()
async deleteDoc(doc) {
await this.dataService.deleteFavorite(doc);
}
@Catch()
async openDialog(doc) {
this.dialog.open(DetailDialogComponent,
{
data: {doc, docs: this.scrollService.docs},
closeOnNavigation: true,
hasBackdrop: true,
disableClose: true
});
}
ngOnDestroy() {
// this.stateService.state.listMode=/false;
this.scrollService.clearDoc();
this.subscription.forEach(sub => sub.unsubscribe());
}
}
<div #dataList
(window:scroll)="onScroll($event)"
style="position:static; margin:10px;height:100%;">
<div
*ngFor="let doc of scrollService.docs"
style="border:2px solid silver;font-family:sans-serif ;
margin:10px auto"
>
<!--へッダーエリア-->
<div style="background-color: steelblue;height:45px;padding:5px;
display:flex;flex-direction:row;">
<div style="margin:auto auto auto 0;color:white;
font-weight: bold;text-align: left;overflow: hidden;
display:flex;align-items: center">
<mat-icon (click)="clickFavoriteButton(doc)"
class="myFavoriteButton"
style="align-self:center;margin: auto 0.2em ;">
{{doc.isFavorite?"favorite":"favorite_border"}}
</mat-icon>
<span class="myTitle" style="color:white;">
#{{doc.serial}} {{doc.name}}
</span>
</div>
<div style="display:flex;align-items: center">
<button mat-mini-fab
color="accent"
style="margin-right: 10px ;"
(click)="openDialog(doc)">詳細
</button>
</div>
</div>
<!-- 説明文 -->
<div style="height:80px;padding:10px;font-size:15px;overflow: hidden">
<span class="mySubTitle" >
{{doc.prefName}}>{{doc.genreName}}<br>
</span>
<span class="myText">
{{doc.descript}}
</span>
</div>
</div>
<div *ngIf="scrollService.docs && scrollService.isEnd" style="background-color: orange;text-align: center">データ末尾</div>
</div>
./list.component.css