students.component.html

<h1>Students</h1>
<form>
  รหัสนักศึกษา:<input type="text" [(ngModel)]="id" name="id"><br>
  คำนำหน้า:<select [(ngModel)]="font" name="font">
              <option selected>โปรดระบุ</option>
              <option>นาย</option>
              <option>นางสาว</option>
          </select>
  ชื่อ<input type="text" [(ngModel)]="fname" name="fname">
  สกุล:<input type="text" [(ngModel)]="lname" name="lname"><br>
  เพศ:<input type="radio" [(ngModel)]="gender" name="male" value="ชาย">Male
      <input type="radio" [(ngModel)]="gender" name="male" value="หญิง">Female
  <button (click)="insert()">Add</button>
  <button (click)="update(index)">Update</button>
</form><br>

<table align="center" border="1">
  <tr>
    <th>รหัสนักศึกษา</th>
    <th>คำนำหน้า</th>
    <th>ชื่อ</th>
    <th>สกุล</th>
    <th>เพศ</th>
    <th>จัดการ</th>
  </tr>
  <tr *ngFor="let item of student; let i=index">
    <td>{{item.id}}</td>
    <td>{{item.font}}</td>
    <td>{{item.fname}}</td>
    <td>{{item.lname}}</td>
    <td>{{item.sex}}</td>
    <td>
      <button (click)="remove(i)">ลบ</button>
      <button (click)="edit(i)">เเก้ไข</button>
    </td>
  </tr>
</table>