checkbox를 통한 데이터 삭제 방법

1. html파일에 checkbox를 생성한다.(추가로 bootstrap 사용)

...

<table class="table">
  <thead class="table-light">
      <tr>
          <th scope="col">선택</th>
          <th scope="col">생성시간</th>
          <th scope="col">키값</th>
        </tr>
  </thead>
  <tbody>
      <tr *ngFor="let keyinfo of listkeyinfos">        
          <td>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                <!--내용추가-->
              </label>
            </div>
          </td>
          <td>{{ keyinfo.timestamp }}</td>
          <td>{{ keyinfo.public_key }}</td>
        </tr>
  </tbody>
</table>

...

1. component.ts 파일에서 checkbox 선택 이벤트 함수 onSelectKey($event: any) 를 생성한다.
2. key.service.ts에서 인터페이스 값에 체크박스 상태를 확인하기위한 변수(select)를 추가한다.

import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';

interface Keyinfo {
  public_key: string;
  private_key: string;
  algorithm: string;
  timestamp: string;
  select: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class KeyService {
...

1. html파일에서 타겟 값(value)과 체크박스 상태(checked)변수 값들을 생성한다.

...
<table class="table">
  <thead class="table-light">
      <tr>
          <th scope="col">선택</th>
          <th scope="col">생성시간</th>
          <th scope="col">키값</th>
        </tr>
  </thead>
  <tbody>
      <tr *ngFor="let keyinfo of listkeyinfos">        
          <td>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="flexCheckDefault"              
              [value]="keyinfo.public_key"
              [checked]="keyinfo.select"
              (change)="onSelectKey($event)"                            
              >
              <label class="form-check-label" for="flexCheckDefault">
                <!--내용추가-->
              </label>
            </div>
          </td>
          <td>{{ keyinfo.timestamp }}</td>
          <td>{{ keyinfo.public_key }}</td>
        </tr>
  </tbody>
</table>
...

1. component.ts 파일에서 전역변수인 selectedPublickey에 체크박스에서 체크된 publickey값을 입력하여준다

...
// 선택 삭제
  onSelectKey($event: any)  {
    const publickey = $event.target.value;
    const isChecked = $event.target.checked;
    console.log(publickey, isChecked);
    
    this.selectedPublickey = publickey;
  }
...

1. 완성된 체크박스 선택 이벤트 함수의 결과를 사용하여 선택삭제 함수를 수정한다.

...
revokeKeyTest() {                    
    const newFormData = { public_key: this.selectedPublickey };    

    this.keyService.postRevokeKey(newFormData).subscribe(data => {      
      console.log(data);
      this.msgTrue = true;    

    this.searchKeylist();
    });
  }
...

1. html에서 선택삭제 버튼을 클릭할 시 삭제 확인을 위한 Modal을 실행시키고 modal에서 삭제확인이 완료되면 선택삭제 함수를 실행시킨다.

...
<!-- Modal revokeAll(선택삭제) -->
<div class="modal fade" id="revokeSelectModal" tabindex="-1" aria-labelledby="revokeSelectModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="revokeSelectModalLabel">선택 삭제</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       선택한 키를 삭제하시겠습니까?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
        <button type="button" class="btn btn-primary"  (click)="revokeKeyTest()" data-bs-dismiss="modal">확인</button>
      </div>
    </div>
  </div>
</div>
...