随着专案前端、後端等等各个架构与部署都准备完成，Side project 就差最後一步骤，将自己或别人辛苦的每日打卡内容展示出来

功能拆解

• 以卡片式的方式呈现每日上传的卡卡内容
• 有两个分页，一个是「看看自己」、一个是「看看大家」

本功能将分分为两篇，本篇将示范建立成果展现页面与一些小细节。下一篇将介绍如何用 firestore 执行比较复杂的动态条件查询，展示如何显示看看自己与看看大家的功能

卡片

首先，先来看呈现每日打卡结果的卡片，在此将卡片独立为一个元件来制作，以利後来的维护

<nb-card [status]="status">
  <nb-card-header>
    <h3>
      <span class="underline">
        {{ checkin.content }}
      </span>
    </h3>
    <div class="subtitle">
      {{ checkin.postUser }}
      <button nbButton hero shape="round" status="primary" routerLink="/checkin/{{ checkin.docPath }}">
        <nb-icon icon="arrow-forward-outline"></nb-icon>
      </button>
    </div>
  </nb-card-header>
  <nb-card-body>
    <div>
      <img height="auto" width="100%" [src]="checkin.imgFile" />
    </div>
    <p>
      <a [href]="checkin.url">{{ checkin.url }}</a>
    </p>
    <p>
      {{ checkin.content }}
    </p>
  </nb-card-body>
  <nb-card-footer>
    <span class="emoji">{{ checkin.emoji }}</span>
    {{ checkin.time.toDate() | date: 'y/M/d/ h:mm' }}
  </nb-card-footer>
</nb-card>

在html的方面，也是淋漓尽致使用 nebular 提供的元件，再将资料绑定上去。

一个值得一提的地方是：

 {{ checkin.time.toDate() | date: 'y/M/d/ h:mm' }}

在将储存在firestore 的时间戳记转换成一般的时间格式的时候，并不会将资料做实际的转换，我们所要的是显示的方式的转换而已，不需要去特别转换原始资料。因此就是使用 管道 pipe 的最好时机，使用 angular 内建的日期管道，即可显示出我们需要的日期格式，而不必去修改任何资料。

这样可以打造更好维护与使用的元件

typescript

逻辑的方面因为只是展示而已，所以只有将资料输入之外，还有一个重点：

changeDetection: ChangeDetectionStrategy.OnPush,

这是 angular 的变更检测，由於资料绑定的特性，只要有一项资料变更，angular 就会检查整个会面上所有的画面需不需要。

但是如果元件在制作的时候切分够乾净、够独立的话，不会受到外部元件影响的话，只有输入的 input 会影响到元件的内容，就可以使用 ChangeDetectionStrategy.OnPush 让变更检测不会检测元件，减少效能上的负担。是非常重要的效能优化技巧

import {
  ChangeDetectionStrategy,
  Component,
  Input,
} from '@angular/core';
import { Checkin } from '@challenge90days/api-interfaces';

@Component({
  selector: 'challenge90days-checkin-card',
  templateUrl: './checkin-card.component.html',
  styleUrls: ['./checkin-card.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckinCardComponent {
  @Input() checkin: Checkin;
}

scss

样式同样秉持着，别人设定好的就不调，只针对需要的地方微调

.subtitle{
    color: #8f9bb3;
    font-weight: 600;
    line-height: 2rem;
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
   
}

.underline{
    padding-bottom: 3px;
    border-bottom: 3px solid #893128;
}

.emoji{
    font-size: 3rem;
}

这样就制作完毕成果展示的卡片元件，下一篇将要介绍如何使用 angular fire 去做 firestore 动态与复杂的查询