각도 CDK가 있는 드래그 가능 테이블

본고는 최초howtomake.software에 발표되었다.

우리는 무엇을 건설해야 합니까?

본고에서, 나는 당신에게 그 줄을 다시 배열할 수 있는 표를 어떻게 만드는지 보여 드리겠습니다.👇

뭐 공부 해요?

각 CDK

우리가 필요로 하는 드래그 가능 테이블의 모든 기능은 Angular CDK 패키지에 묶여 있습니다.먼저 설치하겠습니다.

npm install @angular/cdk

Angular CDK 패키지가 프로젝트에 설치되어 있을 때 이 패키지에서 무엇을 사용할지 알 때입니다.

각도 CDK 테이블 모듈

우리가 드래그 가능한 시계를 구축하고 있기 때문에, 우리가 먼저 필요로 하는 것은 시계이다🙄. 각도 CDK 테이블 모듈을 사용하면 강력한 기능을 갖춘 테이블을 쉽게 구축할 수 있습니다.이 점을 어떻게 하는지 봅시다.
먼저 각도 CDK 테이블을 가져와야 합니다AppModule.

import { NgModule } from "@angular/core";
import { CdkTableModule } from "@angular/cdk/table";

@NgModule({
  imports: [CdkTableModule],
})
export class AppModule {}

CdkTableModule 기본 표원어 지령을 사용할 수 있습니다. cdk-table, cdkColumnDef, cdk-header-cell, cdk-cell 등입니다. 어떻게 사용하는지 토론해 보겠습니다.

테이블 작성

우리는 표 자체를 만들어야 한다.일반 HTML 테이블을 추가하고 cdk-table 명령을 사용하여 각도 CDK 테이블로 표시합니다.

<table cdk-table></table>

다음으로, 우리는 표 구조를 설정해야 한다.우리는 CdkTableModule 제공한 지령을 사용하여 실현할 수 있다.각 섹션을 하나씩 구성합니다.

제목 행 구성

cdk-header-row를 사용하여 머리글 행을 구성할 수 있습니다.이 명령은 제목 줄의 템플릿이라는 것을 이해하게 할 것이다.그리고 우리는 cdk-table 명령을 추가했다.표시할 열 목록을 수신합니다.

<tr
  cdk-header-row
  *cdkHeaderRowDef="['position', 'name', 'weight', 'symbol']"
></tr>

테이블 행 구성

cdkHeaderRowDef를 사용하여 테이블 행을 구성할 수 있습니다.이 명령은 cdk-row 그것이 표행의 템플릿이라는 것을 이해하게 할 것이다.그리고 우리는 cdk-table 명령을 추가했다.표시할 열 목록을 수신합니다.

<tr
  cdk-row
  *cdkRowDef="let row; columns: ['position', 'name', 'weight', 'symbol'];"
></tr>

테이블 셀 구성

이제 표 셀을 구성할 때입니다.

  <ng-container cdkColumnDef="position">
    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container cdkColumnDef="symbol">
    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

여기서 가장 중요한 부분은 cdkHeaderRowDef 이다.이것은 우리가 설정하고 있는 열을 보여 줍니다.여러분은 우리가 방금 각도 CDK 표를 알려주었는데, 표에는 다음과 같은 것이 있습니다. cdkColumnDef.현재 우리는 ['position', 'name', 'weight', 'symbol'] 표를 사용하여 우리가 여기에 설정한 열이 어느 열인지 알려 준다.모든 열의 설정은 매우 비슷하다.우리는 열 템플릿을 깊이 있게 이해합시다.
모든 열 정의에서 우리는 두 줄이 있습니다. 한 줄은 제목 칸이나th에 사용되고, 다른 한 줄은 줄 칸이나 td에 사용됩니다.

<th cdk-header-cell *cdkHeaderCellDef>Name</th>

이 비헤이비어 이름 열은 제목 셀을 구성합니다.이것은 cdkColumnDef="name" 명령을 통해 표에 제목 칸임을 알려 줍니다.그리고 cdk-header-cell 를 사용하여 셀 템플릿으로 표시합니다.

<td cdk-cell *cdkCellDef="let element">{{element.name}}</td>

이 줄은 표 줄 칸의 외관을 설정합니다.*cdkHeaderCellDef 이 요소를 테이블 셀로 표시합니다.Andcdk-cell 명령은 템플릿으로 표시하고 활성 행*cdkCellDef="let element"에 대한 링크를 제공합니다.
그런데 우리는 어디서 이 원소들을 얻을 수 있을까?현재 우리는 템플릿만 있고 유사한 데이터는 없습니다!응. 각도 CDK 테이블은 데이터 원본이라는 개념으로 작동한다.

데이터 소스

각도 CDK 테이블 데이터 소스란 무엇입니까?

데이터 소스 개념은 각도 CDK 테이블에 데이터를 제공하는 방법을 설명합니다.다음 세 가지 방법으로 수행할 수 있습니다.

의 가장 간단한 방법은 일반javascript 수조를 사용하는 것이다.그것은 반드시 대상을 포함해야 한다.이런 상황에서 각 대상은 하나의 시계줄을 대표한다.

사용element.이런 상황에서 당신은 수조 흐름을 제공해야 합니다.이 테이블은 Observable 새 그룹을 발사할 때마다 다시 시작됩니다.(이 강좌에서 우리는 데이터 원본에 대해 이런 방법을 사용할 것이다.)

Observable/DataSource 함수를 포함하는 DataSource 인터페이스를 실현하는 connect 대상을 사용합니다.이런 방법은 더욱 복잡한 장면에 적용된다.특히 데이터 흐름을 정리해야 하는 상황에서이것은 disconnect 기능을 사용하여 완성할 수 있다.

어떻게 데이터를 표에 추가합니까?

우선 데이터로 그룹을 만듭니다.

export class AppComponent {
  private items: PeriodicElement[] = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
    {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  ];
}

그리고 우리는 이 데이터를 주제에 포함시켜야 한다.이것은 우리가 끌어 놓는 과정에서 줄의 순서를 바꾸기 때문에 필수적이다.

export class AppComponent {
  datasource = new BehaviorSubject(this.items);
}

그런 다음 데이터 흐름이 있을 때 테이블에 연결해야 합니다.

<table [dataSource]="dataSource"></table>

이렇게현재 우리는 시계와 그것에 연결된 데이터 원본이 하나 있다.이제 끌 때가 됐어!

드래그 앤 드롭 추가

필요한 모든 드래그 앤 드롭 기능은 각도 CDK DragDrop 모듈에 포함되어 있습니다.그러면 먼저 가져오겠습니다.

import { NgModule } from "@angular/core";
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [DragDropModule],
})
export class AppModule {}

설치disconnect 후 템플릿에서 DragDropModule 및 cdkDrag 명령을 사용하여 요소를 드래그할 수 있습니다.어떻게 작동하는지 봅시다.

cdkDrag 회사

<tr cdk-row *cdkRowDef="let row;" cdkDrag></tr>

이것은 우리가 몇 분 전에 정의한 표행이다.하지만 지금 나는 여기에 cdkDropList 지령을 추가했다.이 명령은 요소를 드래그할 수 있게 합니다.

cdkDropList

다음 단계는 드래그 가능한 요소를 정의하는 용기입니다.우리의 예에서, 우리는 시계 줄을 다시 배열해야 하기 때문에, 이것은 우리의 드래그 가능한 요소 용기가 우리의 시계라는 것을 의미한다.

<table cdk-table cdkDropList (cdkDropListDropped)="drop($event)"></table>

나는 방금 여기에 cdkDrag 지령을 추가했다.이 테이블을 드래그 가능한 요소 용기로 표시하고 cdkDropList 명령을 사용하여 버림 이벤트를 출력할 수 있습니다.따라서 사용자가 표의 어느 위치의 요소를 방출할 때, 우리는 버려진 사건을 받을 것이다.그리고 우리는 그것에 대해 반응을 하고 목록 데이터 원본의 데이터를 다시 정렬할 수 있다.
따라서 위에서 보셨듯이 cdkDropListDropped 이벤트에 drop 리셋을 추가했습니다.우리가 그것을 실현하고, 우리의 시계가 최종적으로 다시 배열될 수 있도록!!

import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';


export class AppComponent {
  drop(event: CdkDragDrop<string[]>) {

    // Rearrange the data in the array
    moveItemInArray(this.items, event.previousIndex, event.currentIndex)

    // Publish a new version of the data into the datasource
    this.dataSource.next([...this.items]);
  }
}

이게 어떻게 된 일입니까?우리는 방금 cdkDropListDropped 사건을 받았다.항목을 이동하는 데 필요한 모든 정보를 포함합니다.그것은 사용자의 시각적 이동을 가진 항목의 CdkDragDrop 과 previousIndex 을 가지고 있다.그런 다음 각도 CDK DragDrop 모듈에서 제공하는 currentIndex 함수를 사용하여 이전 위치에서 새 위치로 이동할 수 있습니다.
마지막으로, 우리는 단지 새로운 버전의 데이터를 표에 발표할 뿐이다!이렇게 간단하다니!결과는 다음과 같다.👇

요점을 요약하여 다시 말하다.

이 강좌에서는 각도 CDK 테이블과 DragDrop 모듈을 사용하여 Angular에서 다시 정렬할 수 있는 테이블을 만드는 방법을 배웠습니다.나는 네가 모든 세부 사항을 이해하고 이 문장을 좋아할 수 있기를 바란다.만약 당신에게 무슨 문제가 있으면 저에게 알려주세요. 저는 최선을 다해 당신을 도울 것입니다.
Angular CDK의 더 많은 콘텐츠에 관심이 있으시면 저를 따르십시오subscribe to my newsletter🔥