Как отобразить значение одного столбца вместо всей строки во время действия перетаскивания в angular

Question

Привет всем, я работаю над базовым c примером перетаскивания в angular, текущая работа заключается в том, что при перетаскивании строки из одной позиции в другую отображается вся строка. Моё требование - отображать только значение одного столбца, например «имя», а не вся строка.

Вот мой HTML: dragtable.component. html

<table cdkDropList  (cdkDropListDropped)="drop($event)">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let student of Student" cdkDrag >
            <td>{{student.name}}</td>
            <td>{{student.id}}</td>
            <td>{{student.age}}</td>
        </tr>
    </tbody>
</table>

ts файл: dragtable.component. тс

        import { Component } from '@angular/core';
        import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
        @Component({
        selector: 'dragtable-app',
        templateUrl: './dragtable.component.html',
         styleUrls: ['./dragtable.component.css']
          })
          export class DragTableComponent {
             Student = [
             {
                 name: 'abc',
                 id: '1',
                 age: '23'
             },
             {
                name: 'bdc',
                id: '2',
                age: '24'
             },
             {
               name: 'abg',
               id: '3',
              age: '25'
             },
              {
               name: 'dty',
               id: '4',
               age: '26'
              },

             ];

             drop(event: CdkDragDrop<string[]>) {
             moveItemInArray(this.Student, event.previousIndex, event.currentIndex);
              }
             }