Выпадающий список отключить / включить на основе загрузки завершена или нет

Question

Я хочу отключить раскрывающийся список при загрузке, поэтому пользователь не может щелкнуть элемент. После завершения загрузки включите его. Есть свойство отключить , поэтому я связываю его с логическим значением.

Код:

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);
  }
}

Но это не работает, что означает, что даже я изменил логическое значение значение, на которое нет никакого влияния ? Если нет, то есть ли альтернативный способ добавить оверлей на нем?

Answer 1

Вам необходимо привязать свойство disabled к вашей модели, используя квадратные скобки. И вы неправильно указали атрибут disabled как disable.

[disabled]="loading"

Кроме того, вы использовали function() { } для своего обратного вызова, что означает, что this относится к самой функции. Вам необходимо использовать функцию стрелки для обновления свойства компонента.

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

DEMO: 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);
 }
}