如何在 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>
...

和

[空文本]="''"

您可以為空結果自定義消息，也可以像我一樣將其設為空，它不會再次顯示為空。