下拉列表根据加载是否完成禁用/启用

Question

我想在加载时禁用下拉列表，因此用户无法单击某个项目。加载完成后启用它。有一个属性 disable 所以我用一个布尔值绑定它。

代码：

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

@Component({
  selector: 'my-app',
  template: `
   <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-dropdownlist 
        [data]="listItems"
        disable="loading">
     </kendo-dropdownlist>
   </div>
 })
 export class AppComponent implements OnInit{
    public loading: boolean;
    public listItems: Array<string>;
    ngOnInit() {
    this.loading = true;
    this.listItems = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
    setTimeout(function(){ this.loading = false; }, 5000);
  }
}

但它不起作用，这意味着即使我更改了布尔值也没有影响它。

请看Stackblize Demo

我的问题：

如何让它发挥作用？如果没有，还有其他方法可以添加旋转覆盖吗？

Answer 1

您需要使用方括号表示法将 disabled 属性绑定到您的模型。而且您将 disabled 属性拼错为 disable.

[disabled]="loading"

此外，您使用了 function() { } 作为回调，这意味着 this 的范围仅限于函数本身。您需要使用箭头函数来更新组件属性.

<kendo-dropdownlist [data]="listItems" [disabled]="loading">
</kendo-dropdownlist>

演示：https://stackblitz.com/edit/angular-fqytq7-dwnirt

Answer 2

您可以使用以下代码段禁用它：

[disabled]="loading"

示例：

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

@Component({
 selector: 'my-app',
 template: `
  <div class="example-wrapper">
  <p>T-shirt size:</p>
  <kendo-dropdownlist 
    data]="listItems"
    [disabled]="loading">
  </kendo-dropdownlist>
  </div>
})
export class AppComponent implements OnInit{
 public loading: boolean;
 public listItems: Array<string>;
 ngOnInit() {
 this.loading = true;
 this.listItems = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
 setTimeout(()=>{ this.loading = false; }, 5000);
 }
}

下拉列表根据加载是否完成禁用/启用

Dropdown list disable / enable based on loading completed or not

kendo-ui-angular2

angular