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

时间:2017-04-07 20:36:52

标签: modal-dialog jquery-ui-sortable ng2-bootstrap ng-bootstrap

我有一个按钮,使用ng-bootstrap模态触发模态

<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>

课程将是:

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?
    }
}

1 个答案:

答案 0 :(得分:1)

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