Question

TL / DR

嵌套的（第二级）离子重排组在其父级移到更高的离子重排组（第一级）后停止工作。

演示项目在这里：ionic4 nested reorder

案件

我有一个离子重排组，其中包含一系列问题。每个问题都嵌套了带有答案的ion-reorder-group。用户应能够对问题进行重新排序，并在每个问题的列表上对答案进行重新排序。问题和答案都使用手柄进行拖放。

问题

当第一次呈现页面时，这可以正常工作。但是，当一个问题被移动时，带有答案的嵌套重排列表将不再起作用-答案的句柄现在拖动了整个问题。

预期行为

嵌套的重排序列表在对其第一级重排序对象进行重排序之后应能正常工作。

我的笨拙解决方法

通过反复试验，我发现，如果我在移动问题后使用* ngIf =“ hide”隐藏重新排序列表，然后可以异步地再次出现，则可以重新排列答案。

questionMoved() {
   this.hideAnswers = true;
   setTimeout(()=>{
     this.hideAnswers = false;
   }, 0);
}

<ion-reorder-group
  *ngIf="!this.hideAnswers"
  disabled="false"
  (ionItemReorder)="itemReorder($event)"
>

主页-问题列表

...

export class HomePage {
questions = [
    {
      question: "Question 1",
      answers: ["Yes","No","Not sure",]
    },
    {
      question: "Question 2",
      answers: ["A","B","C","D",]
    },
    {
      question: "Question 3",
      answers: ["Yes","No","Not sure",]
    }
  ];

itemReorder(event) {
    event.detail["complete"](true);
}
...

<ion-reorder-group
    (ionItemReorder)="itemReorder($event)"
    disabled="false"
    id="reorderQuestions"
  >
      <div 
        *ngFor="let current of this.questions; let i = index" 
        class="question"
      >
        <ion-item>
          <ion-reorder slot="end" style="border: 2px solid black;"></ion-reorder>
          <ion-label>{{ current.question }}</ion-label>
        </ion-item>
        <ion-item>
          <app-answers
            style="width: 75%;"
            [answers]=current.answers
          ></app-answers>
        </ion-item>
      </div>
  </ion-reorder-group>

答案组件-答案列表

每个问题中都使用此组件。

@Component({
  selector: 'app-answers',
  templateUrl: 'answers.component.html',
  styleUrls: ['answers.component.scss'],
})
export class AnswersComponent {

  @Input() answers = [];

  itemReorder(event) {
    event.detail["complete"](true);
    event.stopPropagation();
  }

}

<ion-reorder-group
  disabled="false"
  (ionItemReorder)="itemReorder($event)"
>
  <ion-item 
    *ngFor="let current of this.answers; let i = index" 
    class="answers"
  >
    <ion-label>{{ current }}</ion-label>
    <ion-reorder slot="end" style="border: 2px solid black;"></ion-reorder>
  </ion-item>
</ion-reorder-group>

嵌套的重新排序组问题-移动第一级组件后，第二级重新排序停止工作

主页-问题列表

答案组件-答案列表

0 个答案: