时间戳

首页 > 解决方案 > 访问 mat-checkbox 的“禁用”属性

angular - 访问 mat-checkbox 的“禁用”属性

问题描述

我无法更改 mat-checkbox 的 disabled 属性 - https://material.angular.io/components/checkbox/api

<mat-checkbox (change)="itemChanged()" [(ngModel)]="item.selected"
              [disableAfterClick]="reenableButton">
</mat-checkbox>

我有一个指令在单击复选框后禁用该复选框，然后在从代码触发事件后（例如在后端请求完成后）重新启用它。该指令正在工作，因为背景颜色的变化完全符合预期。但是，禁用该复选框根本不起作用，我不明白，因为该指令适用，button但它无法捕获mat-checkbox disabled属性。我也尝试p-checkbox以相同的结果应用它。

指令：

import {Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
import {Subscription} from 'rxjs';

@Directive({
  selector: '[disableAfterClick]'
})
export class DisableAfterClickDirective implements OnInit, OnDestroy {

  @Input('disableAfterClick') reenableButton: EventEmitter<boolean>;
  subscription: Subscription;

  constructor(
    private renderer: Renderer2,
    private el: ElementRef
  ) {
  }

  @HostListener('click')
  onClick() {
    this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'true');//this doesn't work
    this.renderer.setProperty(this.el.nativeElement, 'disabled', 'true');//this doesn't work
    this.el.nativeElement.setAttribute('disabled', 'true');//this doesn't work
    this.el.nativeElement.style.backgroundColor = 'yellow';//this works
  }

  ngOnInit() {
    this.subscription = this.reenableButton.subscribe(value => {
      if (!value) {
        this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
        this.renderer.setProperty(this.el.nativeElement, 'disabled', 'false');
        this.el.nativeElement.style.backgroundColor = 'red';//this works
      }
    });
  }

  ngOnDestroy() {
    this.subscription && this.subscription.unsubscribe();
  }

}

我怎样才能使这个指令适用于mat-checkbox？

标签： angularangular-material

解决方案

您需要通过函数传递$event事件，例如 `<mat-checkbox (change)="itemChanged($event)" [(ngModel)]="item.selected"change()

[disableAfterClick]="reenableButton">`

您将希望在itemChanged(event: MatCheckBoxChange) { do stuff }需要它的组件/指令中拥有它。

https://material.angular.io/components/checkbox/api#MatCheckboxChange

推荐阅读