【プログラミング入門】javaでWEBアプリケーションを作ってみよう！【DB処理画面作成編】

<div>
  <h1>TEST</h1>
  <form>
    <div>
      <h2>一覧</h2>
      <hr>
      <button (click)="getList()">一覧取得</button>
      <div>
        <ul>
          <li *ngFor="let data of list" (click)="onSelect(data)">
            <span>{{data.testId}}</span> {{data.testInfo}}
          </li>
        </ul>
      </div>
      <h2>選択</h2>
      <hr>
      <div *ngIf="selectedData">
        <div><span>test_id: </span>{{selectedData.testId}}</div>
        <div>
          <label>test_info:
            <input [(ngModel)]="selectedData.testInfo" name="listInfo" placeholder="test_info">
          </label>
        </div>
      </div>
      <button (click)="update()">更新</button>
      <button (click)="delete()">削除</button>
      <h2>追加</h2>
      <hr>
      <div>
        <label>test_id:
          <input [(ngModel)]="insertData.testId" name="id" placeholder="test_id">
        </label>
      </div>
      <div>
        <label>test_info:
          <input [(ngModel)]="insertData.testInfo" name="info" placeholder="test_info">
        </label>
      </div>
      <button (click)="insert()">追加</button>
    </div>
  </form>
</div>

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Test } from './test';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  constructor(private http: HttpClient) { }

  list = null;

  selectedData: Test = new Test;

  insertData: Test = new Test;

  ngOnInit() {

  }

  getList() {
    var url = "http://localhost:8080/api/test";

    this.http.get(url)
    .subscribe(response => {
        this.list = response;
    });
  }

  onSelect(data: Test) {
    this.selectedData = data;
  }


  update() {
    var url = "http://localhost:8080/api/test";

    this.http.put(url, this.selectedData)
    .subscribe(response => {
        this.list = response;
    });
  }


  delete() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
      }),
      body: this.selectedData
    };

    var url = "http://localhost:8080/api/test";
    this.http.delete(url, httpOptions)
    .subscribe(response => {
        this.list = response;
    });
  }


  insert() {
    var url = "http://localhost:8080/api/test";

    this.http.post(url, this.insertData)
    .subscribe(response => {

    });
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

export class Test {
  testId: number;
  testInfo: string;
}