Выбор радиовхода сбрасывается при использовании перетаскивания материала angular - PullRequest
Новая
       121

Выбор радиовхода сбрасывается при использовании перетаскивания материала angular

1 голос
/ 06 августа 2020

Я пытаюсь использовать компонент перетаскивания материала angular, чтобы изменить порядок списка базовых c радиовходов.

Когда страница загружается, проверяется правильный радиовход. Моя проблема в том, что когда я переупорядочиваю отмеченный элемент в списке с помощью дескриптора [Grab], кажется, что радио-выбор сбрасывается, и я не могу понять, как сохранить этот выбор.

Действительно странная вещь для меня, если бы это был флажок, он бы работал нормально. Итак, я предполагаю, что это как-то связано с тем, как я настроил радиовход.

Благодарю за любую помощь, которую вы можете предложить.

Вот мой stackblitz: 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
  }
]
}

1 Ответ

1 голос
/ 07 августа 2020

Я думаю, что это проблема 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');

Forked Stackblitz

...