การสร้าง array และใช้ for loop

วันนี้ก็ตามหัวข้อเลยครับ อันดับแรกเรามาสร้าง file student.ts และ สร้าง class student และใส่ property ตามด้านล่างนี้ครับ

export class Students {
id: number;
name: string;
firstname: string;
tel: string;
}

จากนั้นกลับมาที่ app.component.ts แล้วทำการสร้าง array

const STUDENTS : Students[] = [
{ id: 570611006, name: ‘Jane’,firstname: ‘Janejira’ ,tel: ‘0811111111’},
{ id: 570611010, name: ‘Zack’,firstname: ‘Theeranit’,tel: ‘0822222222’},
{ id: 570611016, name: ‘Jao’,firstname: ‘Khotchakan’,tel: ‘0833333333’},
{ id: 570611021, name: ‘Ret’ ,firstname: ‘Naret’,tel: ‘0844444444’},
];

จากนั้นจะใช้คำสั่งด้านล่างนี้ เพื่อวน for loop ของ array ครับ

*ngFor=”let student of students” ซึ่งจะเพิ่มคำสั่งนี้ลงไปใน @ component

@Component({
selector: ‘my-app’,
template: `
<h1>{{title}}</h1>
<ul class=”students”>
<li *ngFor=”let student of students”>
<span class=”badge”>{{student.id}}</span> {{student.name}}
</li>
</ul>
<student-detail [student]=”selectedStudent”></student-detail>

จากนั้นทำการสร้างตัวแปรที่เก็บค่า array เพื่อเรียกใช้ ลงใน class appcomponent

students = STUDENTS;

เราจะสร้าง functionและทำการ add function นี่ลงไปใน class appcomponent เพื่อให้ตอนคลิกแล้วโชว์ detail

selectedStudent: Students;
onSelect(student: Students): void {
this.selectedStudent = student;
}
onSelect(student: Students): void {
this.selectedStudent = student;
}

สร้าง student-detail.componet.ts ขึ้นมา เพื่อที่จะทำ component ของ student detail และใช้ if condition ว่า *ngIf=”student” เมื่อมีการคลิก student คนนี่ให้โชว์ detail ของ student คนนี่ โดยการ

import { Component, Input } from ‘@angular/core’;
import { Students } from ‘./student’;
@Component({
selector: ‘student-detail’,
template: `
<div *ngIf=”student”>
<h2>{{student.name}} details!</h2>
<div><label>id: </label>{{student.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]=”student.name” placeholder=”name”/>
</div>
<div>
<label>firstname: </label>
<input [(ngModel)]=”student.firstname” placeholder=”firstname”/>
</div>
<div>
<label>Telephone: </label>
<input [(ngModel)]=”student.tel” placeholder=”Telephone”/>
</div>
</div>
`
})

ต่อไปเราจะสร้างตัวรับ input จาก หน้า appcomponent ตามด้านล่างเลยครับ

export class StudentDetailComponent {
@Input() student: Students;
}

จากนั้นกลับไปหน้า app.component เพื่อเพิ่ม css จัดหน้าให้ดูง่ายขึ้น ลงใน @ component

styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.students {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.students li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.students li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.students li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.students .text {
position: relative;
top: -3px;
}
.students .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
})

เมื่อเราทำมั้งหมดที่ผ่านมาแล้ว จะได้ผลลัพธ์ของ Student.ts ดังด้านล่างครับผม

ด้านล่างนี้จะเป็น code ที่จะอยู่ในแต่ละไฟล์ของ project ของเราครับ

studennt.ts

App.module.ts

App.component.ts

App.component.ts(continue)

App.component.ts(continue)

Student-detail.component.ts