来自 ng-bootstrap 的模态与来自 ng2-bootstrap 的可排序组件集成

Question

我有一个使用 ng-bootstrap modal

触发模态的按钮

<button (click)="openModal()">Open</button>

modal.html 内含可排序组件的模板是：

<template #modalContent let-c="close" let-d="dismiss">
    <bs-sortable #sortableComponent [(ngModel)]="array 
     [itemTemplate]="itemTemplate"></bs-sortable>
</template>

<template #itemTemplate let-item="item" let-index="index">
    <div>{{item | json}} 
        <span class="fa fa-trash" (click)="removeItem(array,index)"></span>
    </div>
</template>

class 将是：

import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
export class sortableModal{
    @Input() public array: [];
    @ViewChild("modalContent") public modalContent: NgbModalModule;
    @ViewChild("sortableComponent") sortableComponent: SortableComponent;

    constructor( public modalService: NgbModal ){
    }

    openModal(){
        this.modalService.open(this.modalContent);
    }

    removeItem(arr,i){
        if(i===undefined) i = -1;
        arr.splice(i,1);
        this.sortableComponent.writeValue(arr); 
        //this.sortableComponent is undefined; why is that?
    }
}

Answer 1

我仍然不知道为什么会这样。但是我通过将 ng2-bootstrap 可排序组件包装到您自己的组件 MySortableComponent 中来解决它，该组件具有可排序组件。它有效。