削除機能を作る｜AngularでWebサイト作成

ntuti

削除機能を作る｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回は前回作成し一覧画面に削除機能を追加していきます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.一覧表示用テンプレートの編集

HTMLテンプレートを編集します。

<h1>ユーザ一覧</h1>
<table id="contents" class="table">
    <tr>
        <th>ID</th>
        <th>ユーザ名</th>
        <th></th> <!-- ←テーブル列を1つ追加 -->
    </tr>
    <tr *ngFor="let user of users">
        <td>{{user.id}}</td>
        <td><a [routerLink]="['/user', user.id]">{{user.name}}</a></td>
        <td><button class="btn btn-danger" (click)="delete(user); $event.stopPropagation()">削除</button></td> <!-- ←この行を追加 -->
    </tr>
</table>

手順2.deleteメソッドをcomponentに追加

userlist.component.tsに以下のメソッドを追加

delete(user: User): void {
    this.userService
        .delete(user.id)
        .then(() => {
            console.log('user deleted');
        });
}

これによりHTML側の削除ボタン押下時にdeleteメソッドが実行され、
deleteメソッドがさらにuserServiceのdeleteメソッドを実行するため、
ユーザが削除されることになります。

手順5.確認（サーバ側で要設定）

削除の例も一覧・詳細表示同様に、実際はサーバ側でAPIを用意しなければなりませんが、用意できたらブラウザからリクエストすれば削除処理が実行できるはずです。
（ただし、別サーバへリクエストを投げる場合はCORS（Cross Origin Resource Sharing）対応をしておく必要があります）。