使用角度材质按钮时更新的角度元素参考已损坏

Question

我正在尝试通过指令更新按钮上的Disabled属性。但是在按钮上具有mat-raised-button属性不会使该按钮设置为禁用。这是我的HTML。

<button  mat-raised-button color="primary" *hasPermission="PERMISSION_TYPES.Admin; justDisable: true" >
    DISABLE USER
</button>

然后在我的结构指令中，我禁用了按钮。

@Directive({
    selector: '[hasPermission]', // tslint:disable-line
})
export class HasPermissionDirective implements OnInit {
    @Input() public hasPermission;
    @Input() public hasPermissionJustDisable = false;
    constructor(
        private viewContainer: ViewContainerRef,
        private templateRef: TemplateRef<any>,
        private permissionService: PermissionValidationService,
        private elementRef: ElementRef<any>) {
    }

    ngOnInit(): void {
        this.checkPermission();
    }

    private checkPermission() {
        this.permissionService.hasValidPermission(this.hasPermission)
            .then((hasPermission) => {
                if (!hasPermission && !this.hasPermissionJustDisable) {
                    this.viewContainer.clear();
                    return;
                }
                if (!hasPermission && this.hasPermissionJustDisable) {
                    this.viewContainer.createEmbeddedView(this.templateRef);
                    this.elementRef.nativeElement.nextElementSibling.setAttribute('disabled', 'disabled');
                    return;
                }
                this.viewContainer.createEmbeddedView(this.templateRef);
            });
    }
}

问题是，它不会禁用按钮。但是，如果我像这样删除mat-raised-button：

            <button  *hasPermission="PERMISSION_TYPES.Admin; justDisable: true" >
                DISABLE USER
            </button>

然后禁用该按钮。它必须与有角度的材质如何渲染它们有关。任何帮助，将不胜感激。

谢谢，

Answer 1

我能够通过将[disabled]的设置包装在SetTimeout中来解决该问题，如下所示：

if (!hasPermission && this.hasPermissionJustDisable) {
                    this.viewContainer.createEmbeddedView(this.templateRef);
                    // Timeout is required for some rendering quark with angular material buttons..
                    setTimeout(() => {
                        this.renderer.setAttribute(this.elementRef.nativeElement.nextElementSibling, 'disabled', 'disabled');
                    });
                    return;
                }