使用 ngx-bootstrap 可通过模板排序

Question

我想使用 ngx-bootstrap 库的 Sortable 组件。问题是使用模板可排序的项目是空的。我的项目是具有一些简单值的对象，包括名称和 ID。我想显示名称属性值。这些是我丑陋的 bs-sortable 和 ng-template 标签：

<bs-sortable
    [(ngModel)]="items"
    [itemTemplate]="itemTemplate"
    itemClass="list-group-item"                    
    itemActiveClass="sortable-item-active"
    placeholderItem=""
    placeholderClass="placeholderStyle"
    wrapperClass="sortable-wrapper"></bs-sortable>
<ng-template #itemTemplate let-item="item" let-index="index">
                <span (click)="selectItem(item)" [class.active]="item.id === currentItem.id" [class.iteminactive]="!item.active">
                    {{item.name}}
                </span>
            </ng-template>

在我的 component.ts 中，我有一个包含两个值的 items:IssuePriority[] 属性。此代码生成两个可排序的空行，只是它们都是空的。我究竟做错了什么？它无需使用模板即可工作，但我至少需要使用此模板才能设置我的 css 类和方法。

Answer 1

Sortable 是一个实验组件，因此文档中可能存在一些空白。在您的情况下，当您在 ngModel 中有一个对象数组时，ng-template 中的 item 变量是您对象的包装器。要访问您的对象，请使用 item.value.xxx 而不是 item.xxx。

<ng-template #tpl let-item="item"><span>{{item.value.name}}</span></ng-template>

示例 - https://stackblitz.com/edit/angular-hlawza-sn8hdh?file=app/custom-item-template.html

使用 ngx-bootstrap 可通过模板排序

Use ngx-bootstrap Sortable with template

typescript

ngx-bootstrap

angular