Angular kendo组合框没有数据时无法隐藏

Question

我正在使用 angular 和 kendo，我使用 kendo 组合框将一些值显示为 here。

我想在没有数据匹配时隐藏弹出窗口，但我做不到。

请帮帮我。

Answer 1

当 data.length 为零且 combobox.isOpen 为假时，您必须在过滤器函数中使用 [combobox.toggle()][1]

模板

 <div class="example-wrapper">
          <kendo-combobox
            #combo
              [data]="data"
              [textField]="'text'"
              [valueField]="'value'"
              [filterable]="true"
              (filterChange)="handleFilter($event)"
              [placeholder]="'T-shirt size'"
          >
          <ng-template kendoComboBoxNoDataTemplate>
            No data found!
          </ng-template>
          </kendo-combobox>
      </div>

分量

export class AppComponent {
  @ViewChild('combo') combo:ComboBoxComponent

    public source: Array<{ text: string, value: number }> = [
        { text: 'Small', value: 1 },
        { text: 'Medium', value: 2 },
        { text: 'Large', value: 3 }
    ];

    public data: Array<{ text: string, value: number }>;

    constructor() {
        this.data = this.source.slice();
    }

    handleFilter(value) {
        this.data = this.source.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);

      if(this.data.length == 0 && this.combo.isOpen){
    this.combo.toggle()
  }
    }
}

this is full example

Angular kendo组合框没有数据时无法隐藏

Angular kendo combo box cannot hide when no data

typescript

kendo-combobox

angular