web-dev-qa-db-ja.com

angular 5でスプライスを使用する方法

データベースから取得したデータを表示するテーブルを作成しました。データをフェッチするTS部分は次のようになります。

_this._appService.getVisitData().subscribe((data) => {
  this.checkinTemp = data;
  // Calling the DT trigger to manually render the table
  this.dtTrigger.next();
});
_

テーブルが生成され、編集および削除機能、ビューコードを追加しました。

_<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">

  <thead>
  <tr>
    <th>ID</th>
    <th>Visitor Name</th>
    <th>Department</th>
    <th>Purpose</th>
    <th>Schedule Date Time</th>
    <th>Entry Source</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of checkinTemp">
    <td>{{data.id}}</td>
    <td>
      <a  (click)="viewCheckinData(data)"> {{data.f_name}} {{data.l_name}} </a>
      <span>
            <a  (click)="editCheckinData(data)">Edit</a>
        <a  (click)="confirmDelete(data)">Delete</a>
      </span>
    </td>
    <td>
      <span *ngIf="data.department == null || data.department == ''">N/A</span>
      <span *ngIf="data.department !== null ">{{data.department}}</span>
    </td>
    <td>
      <span *ngIf="data.purpose == null || data.purpose == ''">N/A</span>
      <span *ngIf="data.purpose !== null ">{{data.purpose}}</span>
    </td>
    <td>{{data.pre_check_in | date:'short'}}</td>
    <td>{{data.creator_id}}</td>
  </tr>

  </tbody>
</table>


<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>
_

ここで、ユーザーが削除を押すと、confirmDelete(data)が呼び出されます。 TSファイル内の関数：

_confirmDelete(item) {
  this.confirmationService.confirm({
    message: 'Are you sure you want to delete this Visitor?',
    header: 'Confirmation',
    accept: () => {
      this._appService.deleteCheckin(item.id).subscribe(res => {
        // Splice Or something so the page doesnt reload but the data gets removed from the view.
        this.flashMsg.flashMsg('success', 'Deleted', 'Visitor has been deleted.');
      },
      err => {
        this.flashMsg.flashMsg('error', 'Error', 'Visitor has not been deleted.');
      });
    },
    reject: () => {
    },
  });
}
_

これまでデータを削除すると、データが削除されて確認メッセージがポップアップ表示されますが、ページが再読み込みされるまでデータはビューに表示されたままです。ページを読み込まずにテーブルからデータを削除する方法はありますか？スプライスを調べましたが、コードでそれを使用することができませんでした。

angularangular5splicearray-splice
5
Atul Stha

サーバーからアイテムを正常に削除した後、次のようにsplice(...)を使用して配列からアイテムを削除できます。

const index = this.checkinTemp.indexOf(item);
this.checkinTemp.splice(index, 1);
15
Daniel W Strimpel