1

角度のあるマテリアルのドラッグ アンド ドロップ コンポーネントを使用して、基本的なラジオ入力のリストを並べ替えようとしています。

ページが読み込まれると、正しい無線入力がチェックされます。私の問題は、[グラブ] ハンドルを使用してリスト内のチェックされた項目を並べ替えると、ラジオの選択がリセットされたように見え、選択を保持する方法がわかりません。

私にとって本当に奇妙なことは、これがチェックボックスであればうまくいくということです。だから私はそれが私が無線入力を設定した方法と関係があると仮定しています.

あなたが提供できる助けに感謝します。

ここに私のスタックブリッツがあります: https://stackblitz.com/edit/angular-2q94xh

app.component.html

<table cdkDropList (cdkDropListDropped)="drop($event)">
  <tr *ngFor="let selection of content" cdkDrag>
    <td>
      <div class="grab" cdkDragHandle>[Grab]</div>
    </td>
    <td>
      <input 
        [id]="selection.id" 
        type="radio" 
        name="radio"
        [checked]="selection.selected"
      >
    </td>
    <td>{{ selection.selected }}</td>
  </tr>
</table>

app.component.ts

import { Component } from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem, CdkDrag} from '@angular/cdk/drag-drop';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.content, event.previousIndex, event.currentIndex);
  }
content = [
  {
    "id": "1",
    "selected": false
  },
  {
    "id": "2",
    "selected": false
  },
  {
    "id": "3",
    "selected": true
  }
]
}
4

1 に答える 1

1

これは cdk/drag-drop の問題だと思います。ラジオ グループのドラッグが適切に処理されません。

無線入力に同じ名前を持つクローンを作成します。そして、ブラウザは選択をその複製された要素に移動します。

それを修正するために、そのバグのgithub の問題と専用の PRを作成しました。

今のところ、次の回避策を提案できます。

import { DragRef } from '@angular/cdk/drag-drop';

function patchCloneNode(method) {
  const originalMethod = DragRef.prototype[method];

  DragRef.prototype[method] = function() {
    const sourceNode = this._rootElement;
    const originalRadioInputs = sourceNode.querySelectorAll('input[type="radio"]');
    
    const clonedNode = originalMethod.apply(this, arguments) as HTMLElement; 
    const clonedRadioInputs = clonedNode.querySelectorAll<HTMLInputElement>('input[type="radio"]');

    Array.from(clonedRadioInputs).forEach((input, i) => {
      input.name = originalRadioInputs[i].name + method;
    });
    return clonedNode;
  }   
} 

patchCloneNode('_createPlaceholderElement');
patchCloneNode('_createPreviewElement');

分岐したスタックブリッツ

于 2020-08-07T16:59:31.343 に答える