在没有无数据模板的情况下使用 Kendo UI 多选 - Angular 2+答案

【问题标题】：Using Kendo UI Multiselect without No-Data Template - Angular 2+在没有无数据模板的情况下使用 Kendo UI 多选 - Angular 2+
【发布时间】：2019-10-01 18:27:05
【问题描述】：

我正在使用带有 Angular 5 的 Kendo UI。我想使用 Kendo 的 Multiselect 组件来允许用户插入自定义文本值。默认情况下，如果不存在下拉数据，此组件会列出下拉选项或显示“未找到数据”消息。

就我而言，它们没有下拉数据。并且不需要显示无数据模板。谁能告诉我禁用/隐藏无数据模板的可能性吗？

<kendo-multiselect
 formControlName="emails"
 [value]="selectedEmails"
 [allowCustom]="true"
 (valueChange)="onEmailsChange($event)" >                            
</kendo-multiselect>

提前致谢。

【问题讨论】：

标签： angular kendo-ui-angular2

【解决方案1】：

如果您不想看到 “未找到数据” 消息，您可以使用 kendoMultiSelectNoDataTemplate 并将其留空

<kendo-multiselect [data]="listItems">
   <ng-template kendoMultiSelectNoDataTemplate>
   </ng-template>
</kendo-multiselect>

Plunkr

【讨论】：

我试过了。但是你有没有注意到 kendoMultiSelectNoDataTemplate 为空时的空白下拉框？我的目标只是显示在该下拉列表中添加的自定义值。

【解决方案2】：

您还可以向弹出窗口添加自定义类并使用 CSS 将其隐藏。这是一个在 emails 为空时附加类 .k-custom-popup--hidden 的示例。

HTML

<kendo-multiselect
 formControlName="emails"
 [value]="selectedEmails"
 [allowCustom]="true"
 (valueChange)="onEmailsChange($event)"
 [data]="listItems"
 [popupSettings]="{popupClass: !emails.length ? 'k-custom-popup--hidden' : ''}">                            
</kendo-multiselect>

CSS（全球）

.k-custom-popup--hidden {
 display: none;
}

【讨论】：

【解决方案3】：

如果有人正在寻找类似的功能，我已收到 Telerik 团队的回复。可以使用将 ViewEncapsulation 设置为 none 的 CSS 隐藏无数据模板。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `
      <div class="example-config">
      Current value: {{value | json}}
      </div>
      <div class="example-wrapper">
      <p>Favorite sport:</p>
      <kendo-multiselect 
         [allowCustom]="true"
         [(ngModel)]="value" >
      </kendo-multiselect>
      </div>`,
   styles:[`
     .k-nodata, .k-nodata .ng-star-inserted {  display: none   }
   `],
   encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public value;
}

【讨论】：