Angular 5中Kendo UI Multiselect如何隐藏无数据模板？

嘿，刚好之前折腾过Kendo Multiselect的这个点，给你几个靠谱的解决办法：

方法1：自定义空的无数据模板（官方推荐） #

Kendo的Multiselect支持通过kendoMultiSelectNoDataTemplate自定义无数据提示，你直接把这个模板留空就行，完全符合官方规范，不会有样式残留的问题。代码示例：

<kendo-multiselect 
  formControlName="emails" 
  [value]="selectedEmails" 
  [allowCustom]="true"
  [data]="[]" <!-- 你的空数据源 -->
>
  <ng-template kendoMultiSelectNoDataTemplate>
    <!-- 这里啥也不用写，空模板就不会显示任何提示 -->
  </ng-template>
</kendo-multiselect>

方法2：CSS隐藏（快速临时方案） #

如果不想动模板，也可以用CSS精准隐藏这个提示。不过要注意，如果全局用这个样式会影响其他Kendo组件的无数据提示，所以最好给你的Multiselect加个专属类：

<kendo-multiselect 
  class="email-multiselect"
  formControlName="emails" 
  [value]="selectedEmails" 
  [allowCustom]="true"
  [data]="[]"
></kendo-multiselect>

然后对应的CSS：

.email-multiselect .k-nodata {
  display: none !important;
}

要是你确定页面上只有这一个Kendo组件会用到无数据提示，也可以直接全局隐藏：

.k-nodata {
  display: none !important;
}

另外提醒下，记得确保[allowCustom]已经设为true，这样用户才能正常输入自定义文本，这个你代码里已经提到了，别漏了就行～

内容的提问来源于stack exchange，提问作者Nate Getch