时间戳

首页 > 解决方案 > 下拉列表禁用/启用基于加载完成与否

angular - 下拉列表禁用/启用基于加载完成与否

问题描述

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

编码：

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 演示

我的问题：

如何让它发挥作用？如果没有，有什么替代方法可以添加旋转叠加层吗？

标签： angularkendo-ui-angular2

解决方案

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

[disabled]="loading"

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

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

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

推荐阅读