【Angularアプリケーション開発 #6】複数データを表示させる

なんちゃってMockファイルを作成して、複数データをhtmlで扱う方法を学びます。

• Mockファイルを作成しましょう。
  外部から参照できるようにexportの宣言を忘れずに！

mock-member.ts

import { Member } from './member'

export const MEMBER:Member[] = [
  {id:'1',name:'daisuke'},
  {id:'2',name:'masato'},
  {id:'3',name:'takeshi'},
  {id:'4',name:'shiji'}
];

• コンポーネントからMockファイルのデータを参照できるようにします。
  • MEMBERをimportします。
  • membersという変数にMEMBERの代入しています。
    ※onSelectメソッドは今回関係ありません。（気にしないでください）

members.component.ts

import { Component, OnInit } from '@angular/core';
import { Member } from '../member';
import { MEMBER } from '../mock-member';

@Component({
  selector: 'app-members',
  templateUrl: './members.component.html',
  styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {

  members = MEMBER;

  member:Member = {
    id:'1',name:'huyuki'
  }
  constructor() { }

  ngOnInit(): void {
  }

  onSelect():void{

  }
}

• 次にhtmlを修正していきましょう。
  • *ngFor="let member of members"は配列のmembersをmemberプロパティに小分けしているイメージです。ngForで１つずつmemberに分解してmembersの要素数分のループをしています。
  • (click)="onSelect(member)はイベントバインディングというものです。
    clickするとtsファイルのonSelect()メソッドが呼ばれます。（次回実装します。）

members.component.html

<h2>従業員一覧</h2>

<ul class="members">
  <!-- (click)はイベントバインディング -->
  <li *ngFor="let member of members" (click)="onSelect(member)">
    <span class="badge">{{member.id}}</span> {{member.name}}
  </li>
</ul>

<h2>{{member.name}}</h2>
<div>
  <label>id:</label>{{member.id}}
</div>
<div>
  <label>名前:
    <!-- 双方向データバインディング -->
    <input type="text" [(ngModel)]="member.name" placeholder="名前">
  </label>
</div>

• 最後にcssでデザインを整えます。

members.component.css

/* MembersComponent's private CSS styles */
.members {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}

.members li {
  position: relative;
  cursor: pointer;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}

.members li:hover {
  color: #377796;
  background-color: #DDD;
  left: .1em;
}

.members a {
  color: rgb(69, 100, 96);
  text-decoration: none;
  position: relative;
  display: block;
  width: 250px;
}

.members a:hover {
  color: #607D8B;
}

.members li.selected {
  background-color: #CFD8DC;
  color: white;
}

.members li.selected:hover {
  background-color: #BBD8DC;
  color: white;
}

.members .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #482697;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  min-width: 16px;
  text-align: right;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

画面は以下のように表示されていると思います。