Angular 項目を並べ替えるボタンを追加する (↑↓ボタンをクリックで、項目が前後に移動する)

Question

実現したいこと

• 1. 項目を並べ替えるボタンを追加する (↑↓ボタンをクリックで、項目が前後に移動する)

仮説

• 配列の値を取得→条件式→移動

コード

<h1>Todo App</h1>
<form [formGroup]="rForm">
  <div class="form-group registItemArea">
    <div class="input-group">
      <input id="title" class="form-control" placeholder="Title" formControlName="title" />
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" (click)="hasDetail = !hasDetail">詳細</button>
      </span>
    </div>
  </div>
  <div class="card card-block card-header" (click)="hasDetail = !hasDetail">
    <div class="form-group">
      <label for="description">
        <strong>詳細:</strong>
      </label>
      <textarea id="text" class="form-control" formControlName="description"></textarea>
    </div>

    <div class="form-group">
      <label for="date">
        <strong>日付:</strong>
      </label>
      <input type="date" class="form-control" formControlName="date" />
    </div>
  </div>
</form>
<div class=" row ">
  <div class="col-sm-2 ">
    <button class="createBtn btn btn-success " [disabled]="this.rForm.invalid" (click)="onSaveTodoItem()">作成</button>
  </div>
</div>
<hr>
<div class="row itemListArea ">
  <div class="col-sm-12">
    <li *ngFor="let item of itemList; let i=index;">
      <div accordion-heading [class.isComplete]="item.isComplete">
        <button class="btn btn-danger" (click)="onUpItem(i)">↑</button>
        <button class="btn btn-danger" (click)="onDownItem(i)">↓</button>
        {{item.title}}
      </div>
      <div>
        <strong>詳細：</strong>
        <pre>{{item.description ? item.description : "-"}}</pre>
      </div>
      <div>
        <strong>日付：</strong>
        <span>{{item.date ? item.date : "-"}}</span>
      </div>
      <div>
        <button class="btn btn-danger" (click)="onDeleteItem(i)">削除</button>
        <button class="btn btn-success" (click)="item.isComplete = !item.isComplete ">{{item.isComplete ? "未完了に戻す" : "完了にする"}}</button>
       
      </div>
    </li>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormArray } from '@angular/forms';

interface TodoItem {
  title: string;
  description: string;
  isComplete: boolean;
  date: any;
}

@Component({
  selector: 'app-form-practice',
  templateUrl: './form-practice.component.html',
  styleUrls: ['./form-practice.component.scss']
})
export class FormPracticeComponent implements OnInit {

    // 詳細が表示されているか
    public hasDetail = false;
    // アイテムリスト
    public itemList: Array<TodoItem> = new Array<TodoItem>();
  
  rForm: FormGroup;
  constructor(protected fb: FormBuilder) {
   }
   ngOnInit() {
    this.createForm();
} 
   createForm(): void {
    // Form の作成と初期値設定をします。
    this.rForm = this.fb.group({
      title: ['',
        [
          Validators.required
        ]
      ],
      description: [''],
      date: [''],
      isComplete: [false]
    });
  }

   // todoItem を 保存します
   onSaveTodoItem(): void {
    const item: TodoItem = {
      title: this.rForm.get('title').value,
      isComplete: false,
      description: null,
      date: null
    };

    if (this.hasDetail) {
      item.description = this.rForm.get('description').value;
      item.date = this.rForm.get('date').value;
    }

    this.itemList.push(item);
    this.clearForm();
    console.log(this.itemList);
  }

    // フォームの値をリセット
    clearForm(): void {
      this.rForm.reset();
    }
  
    // 指定した要素を削除
    onDeleteItem(index: number): void {
      this.itemList.splice(index, 1);
    }

// 指定した要素を上に移動
    onUpItem(index: number): void {
     this.itemList.splice(0, index);
    }
// 指定した要素を下に移動
    onDownItem(index: number): void {
     this.itemList.splice(-1, index);
   }
}

Comments

[gekijin]

DragDropModule は画面上の部品をドラッグ＆ドロップするためのモジュールなので「項目を並べ替えるボタンを追加する (↑↓ボタンをクリックで、項目が前後に移動する)」という実現したいこととは合わないのではないかと思います。

[A4UxdAF799hT6WT]

ありがとうございます。おっしやる通りですね。改善します。

Answer 1

Array.prototype.splice メソッドの第3引数以下を使ってできました。

  // 指定した要素を上に移動
  onUpItem(index: number): void {
    if (index == 0) return;
    this.itemList.splice(index - 1, 2, this.itemList[index], this.itemList[index - 1]);
  }
  
  // 指定した要素を下に移動
  onDownItem(index: number): void {
    if (index == this.itemList.length - 1) return;
    this.itemList.splice(index, 2, this.itemList[index + 1], this.itemList[index]);
  }

入れ替えたい部分の要素を2つ削除して、入れ替えた後の順で入れています。

Comments

[A4UxdAF799hT6WT]

詰まって困っていたところが解決できました。
ありがとうございました！