根据条件禁用表格行的拖放

Question

下面的代码可以拖放表格行并通过拖放重新排序表格行。 但是，当

item.disable

为 true 时，我想禁用拖放某些行，但不知道该怎么做。我该怎么办？

<table
  [dataSource]="items"
  class="mat-elevation-z1"
  mat-table
  cdkDropList
  [cdkDropListData]="items">
  <ng-container matColumnDef="dragHandle">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element" class="grab-test">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="41"
        viewBox="0 0 23 26"
        width="45"
        style="margin-top: 10px">
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path
          d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
        />
      </svg>
    </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th *matHeaderCellDef mat-header-cell>Name</th>
    <td *matCellDef="let element" mat-cell class="drag-row">
      <input matInput type="text" [(ngModel)]="element.name" />
    </td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
  <tr *matRowDef="let row; columns: displayedColumns" 
      mat-row 
      cdkDrag 
      [cdkDragData]="row">
  </tr>
  <div *cdkDragPlaceholder></div>
</table>

Answer 1

CdkDrag

有一个禁用属性。
有关更多信息，请参阅此处官方文档。

因此，对于您的情况，您可以简单地执行以下操作：

<tr *matRowDef="let row; columns: displayedColumns" 
  mat-row 
  cdkDrag 
  [cdkDragData]="row"
  [cdkDragDisabled]="row.disable">
</tr>