【Angular】ユーザ割当処理を作ろう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はユーザ割当処理の作成方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

実際のシステムでよくあるユーザ割当処理が実装できる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

作りたいもの
1. 実行環境
実際に作ってみよう！
GitHubのサンプルコード

作りたいもの

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

todoList = [
  { title: '事務所の片付け', userId: 1 },
  { title: '荷物の発送', userId: 2 },
  { title: '料金支払い', userId: 3 },
  { title: '経費精算', userId: '' },
];

ちょっと説明がし辛いですが、上記のようなユーザIDをもつオブジェクトと
ユーザ情報を持つ配列があったとします。

userList = [
  { id: 1, name: 'サメハック' },
  { id: 2, name: 'ねこハック' },
  { id: 3, name: 'いぬハック' },
];

これらを結合して、ユーザを割り当てる処理を作成します。

userIdはuserListのidと一致させるよ！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

実際に作ってみよう！

初期設定

ng new my-app
cd my-app
ng serve -o
ng add @angular/material

AngularMaterialのインストール時に聞かれる質問はすべてYesで大丈夫だよ！

app.component.html

<h2>ToDoリスト</h2>

<table border="1">
  <thead>
    <th>No</th>
    <th>タイトル</th>
    <th>担当者</th>
  </thead>
  <tbody>
    <!-- todoリスト分繰り返す -->
    <tr *ngFor="let todo of todoList; let index = index">
      <td>{{ index + 1 }}</td>
      <td>{{ todo.title }}</td>
      <td>
        <!-- userIdとリンクする ※双方向データバインディングである[(ngModel)]とするとエラーになるので注意 -->
        <mat-select [ngModel]="todo.userId" (ngModelChange)="myFunc($event)">
          <!-- 未選択時の設定 -->
          <mat-option value=""> 担当者なし </mat-option>
          <!-- 選択肢はユーザーの中から選択 valueはuserのID -->
          <mat-option *ngFor="let user of userList" [value]="user.id">
            {{ user.name }}
          </mat-option>
        </mat-select>
      </td>
    </tr>
  </tbody>
</table>

最大のポイントは
mat-selectの値をデータ→画面の単方向データバインディング
とすることだよ！

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  userList = [
    { id: 1, name: 'サメハック' },
    { id: 2, name: 'ねこハック' },
    { id: 3, name: 'いぬハック' },
  ];

  todoList = [
    { title: '事務所の片付け', userId: 1 },
    { title: '荷物の発送', userId: 2 },
    { title: '料金支払い', userId: 3 },
    { title: '経費精算', userId: '' },
  ];

  // ユーザIDを取得
  myFunc(event: any) {
    console.log('event', event);
  }
}

app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatSelectModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/Angular-user-assignment

Contribute to same-hack/Angular-user-assignment development by creating an account on GitHub.

ユーザ割当処理を作成できてえらい！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram