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中，我有一个项目：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可以使用模板

1 个答案: