ファイル

src/app/component/favorite/favorite.component.ts

実装

OnInit OnDestroy

メタデータ

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

インデックス

プロパティ
メソッド

コンストラクタ

constructor(router: Router, dialog: MatDialog, dataService: DataService, stateService: StateService, changeDetectorRef: ChangeDetectorRef)
パラメータ :
名前 Type オプション
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()
デコレータ :
@Catch()
戻り値 : void
ngOnInit
ngOnInit()
デコレータ :
@Catch()
戻り値 : void
Async openDialog
openDialog(doc)
デコレータ :
@Catch()
パラメータ :
名前 オプション
doc いいえ
戻り値 : any
Async refresh
refresh()
デコレータ :
@Catch()
戻り値 : any
Async showPhoto
showPhoto(doc)
デコレータ :
@Catch()
パラメータ :
名前 オプション
doc いいえ
戻り値 : {}
trackByFn
trackByFn(index, doc)
パラメータ :
名前 オプション
index いいえ
doc いいえ
戻り値 : any

プロパティ

Public dataService
Type : DataService
Public dialog
Type : MatDialog
dialogRef
docs
Public stateService
Type : StateService
subscription
Type : Subscription
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 {MyEvent, StateService} from '../../service/state.service';
import {Subscription} from 'rxjs';
import * as blobUtil from 'blob-util';
import {Catch} from '../../class/log.class';

@Component({
    selector: 'app-favorite',
    templateUrl: './favorite.component.html',
    styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit, OnDestroy {
    docs;
    subscription: Subscription;
    dialogRef;

    constructor(
        private router: Router,
        public dialog: MatDialog,
        public dataService: DataService,
        public stateService: StateService,
        private changeDetectorRef: ChangeDetectorRef,
    ) {
        this.subscription = this.stateService.subscribe(
            MyEvent.DB_UPDATE, (() => {
                this.refresh();
            }));
    }

    @Catch()
    ngOnInit() {
        this.init();
    }

//初期表示データ取得
    @Catch()
    async init() {
        // try {
        this.docs = await this.dataService.getFavorite();
        console.dir(this.docs);
        // } catch (error) {
        //   throw new Error("お気に入りデータの取得失敗" + error.message);
        // }
    }

    @Catch()
    async refresh() {
        // this.stateService.openSnackBar("favoriteDbが更新されました",1000);
        await this.init();
        this.changeDetectorRef.detectChanges();
        console.log('@@@  同期を表示に反映');
    }


    trackByFn(index, doc) {
        return doc.serial; // or item.id
    }

//写真の表示
    @Catch()
    async showPhoto(doc) {
        try {
            let blob = await this.dataService.getPhoto(doc, false);
            return await blobUtil.blobToDataURL(blob);
        } catch (error) {
            this.stateService.openSnackBar('写真の表示失敗' + error.message);
        }
    }

    @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()
    async deleteDoc(doc) {
        // try {
        await this.dataService.deleteFavorite(doc);
        await this.refresh();
        // } catch (error) {
        //   throw new Error("お気に入りの削除に失敗" + error.message);
        // }
    }

    @Catch()
    async openDialog(doc) {
        this.dialogRef = this.dialog.open(DetailDialogComponent,
            {
                data: {doc: doc, docs: this.docs}
            });
        this.dialogRef.docs = this.docs;
    }

    @Catch()
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

}
<div style="position:static; margin:10px;height:100%;">
  <div
    *ngFor="let doc of docs; let i = index"
    style="border:2px solid silver;font-family:sans-serif ;
    margin:10px auto"
  >
    <!--へッダーエリア-->
    <div style="background-color: beige;height:45px;padding:5px;
    display:flex;flex-direction:row;border-bottom:solid gray 1px; ">
      <div style="margin:auto auto auto 0;color:black;
           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:black;">
          {{doc.name}}
          <span class="mySubTitle">({{doc.timestr}}登録)</span>
      </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}}
        [{{doc._id}}]
        <br>
      </span>
      <span class="myText">
      {{doc.descript}}

      </span>
    </div>
  </div>
  <div *ngIf="docs" style="background-color: orange;text-align: center">データ末尾</div>
</div>

./favorite.component.css

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

result-matching ""

    該当なし ""