如何在Angular 2 Kendo UI可排序中隐藏“空”结果？

Question

我在我的应用中使用Angular 2 Kendo UI Sortable来显示一些动态生成的值列表。有时，列表是空的。剑道坚持要展示一个丑陋的“空”，我无法理解如何摆脱它。

                     <kendo-sortable [navigatable]="true" [data]="newTree | treeBuilder:item.id">
                      <ul>
                        <ng-template *ngIf="item" let-item="item"> // Nope this doesn't work.
                          <li>
                            <div class="child-2">{{item}}</div>
                          </li>
                        </ng-template>
                      </ul>
                    </kendo-sortable>

Answer 1

假设item是Array，请尝试*ngIf="item.length > 0"

Answer 2

好的，它实际上是在the docs中提到的。有3个相关属性：

  

<强> emptyItemClass

     

定义当Sortable具有空数据时应用于空项目的类。

     

<强> emptyItemStyle

     

定义应用于空项目的CSS样式。

     

<强> emptyText

     

设置Sortable没有项目时显示的文字信息。

将空文本设置为“”只会使其再次默认为“空”。所以我找到的解决方案是使用nameOutput.html(data); $('#name-output').html(data); 属性并指定emptyItemStyle，这最终摆脱了它。呼。

愚蠢的功能。为什么不让用户在需要时使用模板条件来指定自己的自定义内容？...

Answer 3

您可以这样使用：

...
<kendo-sortable [navigatable]="true" [data]="newTree | treeBuilder:item.id" [emptyText]="''">
</kendo-sortable>
...

使用

[emptyText] =“''”

您可以自定义消息以保留空结果，也可以像我一样将其置空，它不会再显示为空。