ファイル

src/app/component/list/list.component.ts

実装

OnInit OnDestroy

メタデータ

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

インデックス

プロパティ
メソッド

コンストラクタ

constructor(scrollService: ScrollService, router: Router, dialog: MatDialog, dataService: DataService, stateService: StateService, changeDetectorRef: ChangeDetectorRef)
パラメータ :
名前 Type オプション
scrollService ScrollService いいえ
router Router いいえ
dialog MatDialog いいえ
dataService DataService いいえ
stateService StateService いいえ
changeDetectorRef ChangeDetectorRef いいえ

メソッド

clickFavoriteButton
clickFavoriteButton(doc)
デコレータ :
@Catch()
パラメータ :
名前 オプション
doc いいえ
戻り値 : void
Async deleteDoc
deleteDoc(doc)
デコレータ :
@Catch()
パラメータ :
名前 オプション
doc いいえ
戻り値 : any
Async init
init()
デコレータ :
@Catch()
戻り値 : any
ngOnDestroy
ngOnDestroy()
戻り値 : void
ngOnInit
ngOnInit()
デコレータ :
@Catch()
戻り値 : void
onScroll
onScroll(event)
パラメータ :
名前 オプション
event いいえ
戻り値 : void
Async openDialog
openDialog(doc)
デコレータ :
@Catch()
パラメータ :
名前 オプション
doc いいえ
戻り値 : any
Async refresh
refresh()
デコレータ :
@Catch()
戻り値 : any
resize
resize()
戻り値 : void
trackByFn
trackByFn(index, doc)
デコレータ :
@Catch()
パラメータ :
名前 オプション
index いいえ
doc いいえ
戻り値 : any

プロパティ

Public dataService
Type : DataService
Public dialog
Type : MatDialog
Public scrollService
Type : ScrollService
Public stateService
Type : StateService
subscription
Type : []
既定値 : []
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

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

result-matching ""

    該当なし ""