如何在 Angular 2 Kendo UI Sortable 中隐藏“Empty”结果？

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

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

空项目类

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

空项目样式

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

空文本

设置当 Sortable 没有项目时将显示的文本消息。

将空文本设置为 "" 只会使其再次默认为 "Empty"。 所以我找到的解决方案是使用emptyItemStyle属性并指定display:none ，最后摆脱了它。 呼。

愚蠢的特征。 如果用户需要使用模板条件，为什么不让用户指定他们自己的自定义内容呢？...

Answer 2

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

Answer 3

你可以这样使用：

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

和

[空文本]="''"

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