【Angular】西暦・和暦・年齢・干支を表に出力

AngularJSで西暦・和暦・年齢・干支を表に出力する方法について入門者向けにまとめました。

## 【表】西暦・和暦・年齢・干支

AngularJSで西暦・和暦・年齢・干支を表に出力します。

import { Component } from '@angular/core';

// 西暦を干支に変換
function yearToEto(year: number): string {
  var arr1 = new Array("庚","辛","壬","癸","甲","乙","丙","丁","戊","己");
  var arr2 = new Array("申","酉","戌","亥","子","丑","寅","卯","辰","巳","午","未");
  var arr3 = new Array("猿","鳥","犬","猪","鼠","牛","虎","兎","竜","蛇","馬","羊");
  // return arr1[year % 10] + "・" + arr2[year % 12] + "（" + arr3[year % 12] + "）";
  return arr2[year % 12];// + arr3[year % 12];
};

// 西暦を干支に変換
function yearToEtoId(year: number): string {
  var arr = new Array("saru","tori","inu","i","ne","ushi","tora","u","tatsu","mi","uma","hitsuji");
  return arr[year % 12];
};

// 西暦を和暦に変換
function yearTowareki(year: number): string {
  var wareki = "エラー";
  if (year > 2018)
      wareki = "未定" + (year - 2018);
  else if (year > 1988)
      wareki = "平成" + (year - 1988);
  else if (year > 1925)
      wareki = "昭和" + (year - 1925);
  else if (year > 1911)
      wareki = "大正" + (year - 1911);
  else
      wareki = "明治" + (year - 1867);

  return wareki;
};

// 西暦を干支に変換
function ageToEvent(age: number): string {
  var events = {0:"今年",
                7:"小学入学",
                13:"中学入学",
                16:"高校入学",
                19:"大学入学",
                20:"成人,弱冠",
                24:"厄年(男)",
                27:"アラサー",
                30:"而立",
                32:"厄年(女)",
                36:"厄年(女)",
                40:"初老,不惑",
                41:"厄年(男)",
                50:"中老,知命",
                60:"還暦,厄年",
                64:"破瓜",
                65:"定年退職",
                70:"杖国",
                77:"喜寿",
                80:"傘寿,杖朝",
                88:"米寿",
                90:"卒寿",
                98:"白寿",
                100:"百賀",
                108:"茶寿",
                111:"皇寿",
                112:"珍寿",
                120:"大還暦"}
if (age in events) {
      return events日付未入力;
  }
  else{
      return "";
  }

};

// 表の作成
function setTable(startYear: number, endYear: number): { any: any[]; } {
  // 2次元配列の宣言
  var data = {any:[]};
  var i = 0;
  var date = new Date();
  var year = date.getFullYear();

  for(i=startYear; i < endYear+1; i++){
    data.any.push([i, yearTowareki(i), year-i +"歳", yearToEto(i), ageToEvent(year-i)]);
  }
  return data;
};

// コンポーネントの構成情報を定義するデコレータ
@Component({
  // コンポーネントの適用先を表すセレクター式
  selector: 'app-root',

  // コンポーネントに適用するスタイルシート
  styleUrls: ['./app.component.css'],

  // コンポーネントに適用するテンプレート(外部ファイルから読み込み)
  templateUrl: './app.component.html',
})


export class AppComponent {
  private data: { any: any[]; };

  constructor() {
    this.data = setTable(1868, 2028);
  }
};

■app.component.html

<table>
  <tr>
    <th>西暦</th>
    <th>和暦</th>
    <th>年齢</th>
    <th>干支</th>
    <th>人生暦</th>
  </tr>
  <ng-container *ngFor="let row of data.any; let i = index">
    <tr>
    　<ng-container *ngFor="let col of row; let j = index">
    　　<td id="{{col}}" class="{{col}}">{{col}}</td>
    　</ng-container>
    </tr>
  </ng-container>
</table>

■app.component.css

body{
    background:#222;
}

table{
    text-align:center;
    width:100%;
    border-collapse: collapse;
}

td, th{
    padding-top:7px;
    padding-bottom:7px;
    /* font-size:40px; */
    font-size:100%;
    border: 2px #000 solid;
    border-collapse: collapse;
}

table th{
    color:#eee;
    background-color: rgb(78, 54, 24);
}

/* 偶数行の背景色変更 */
tr:nth-child(2n) {
    background: rgb(226, 239, 209);
}

/* 奇数行の背景色変更 */
tr:nth-child(2n+1) {
    background: rgb(238, 238, 238);
}

.申,.酉,.戌,.亥,.子,.丑,.寅,.卯,.辰,.巳,.午,.未{
    padding-left:16px;
    font-weight: bold;
  }

  .申,.酉,.戌,.亥,.子,.丑,.寅,.卯,.辰,.巳,.午,.未{
      /* background-image: url(../img/ne.jpg); */
      background-repeat: no-repeat;
      text-align:right;
      background-size:32px;
      background-position: left center;
  }
  /*
  .丑{
      background-image: url(../img/ushi.jpg);
  }

  .寅{
      background-image: url(../img/tora.jpg);
  }

  .卯{
      background-image: url(../img/u.jpg);
  }

 .辰{
      background-image: url(../img/tatsu.jpg);
  }

  .巳{
      background-image: url(../img/mi.jpg);
  }

 .午{
      background-image: url(../img/uma.jpg);
  }

.未{
      background-image: url(../img/hitsuji.jpg);
  }

.申{
      background-image: url(../img/saru.jpg);
  }

.酉{
      background-image: url(../img/tori.jpg);
  }

.戌{
      background-image: url(../img/inu.jpg);
  }

.亥{
      background-image: url(../img/i.jpg);
  } */

■実行結果