如何禁用 <md-expansion-panel> material2 angular2答案

【问题标题】：How to disable <md-expansion-panel> material2 angular2如何禁用 <md-expansion-panel> material2 angular2
【发布时间】：2023-03-14 06:12:01
【问题描述】：

我在材料设计的官方文档方面遇到了一些问题，他们说

可以使用 disabled 属性禁用扩展面板。用户无法切换禁用的扩展面板，但仍可以通过编程方式进行操作。

<mat-expansion-panel [disabled]="isDisabled">
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

但是当我尝试它时会抛出一些错误-

Uncaught Error: Template parse errors:
Can't bind to 'disabled' since it isn't a known property of 'md-expansion-panel'.
1. If 'md-expansion-panel' is an Angular component and it has 'disabled' input, then verify that it is part of this module.
2. If 'md-expansion-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

            <md-expansion-panel
            [ERROR ->][disabled]="true"

               routerLink="/settings/tools"
")

有什么帮助吗？

【问题讨论】：

您能否更新您的问题以显示 Angular 版本和 Angular Material 版本？

标签： angular typescript angular-material angular2-template

【解决方案1】：

当我查看 mat-expansion-panel 代码 (selector: 'mat-expansion-panel') 时，我发现它确实已禁用它的输入之一 (inputs: ['disabled', 'expanded'])，但我没有看到它被使用...

我可以建议一个解决方法：在 mat-expansion-panel 上设置 pointer-events: none。

【讨论】：

【解决方案2】：

<mat-expansion-panel [disabled]="isDisabled">
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

组件.ts

禁用设置值 - this.isDisabled= true;

启用设置值 - this.isDisabled= false;

【讨论】：

【解决方案3】：

'disabled' 是一个已定义的属性，它会立即禁用扩展面板上的用户交互。直接设置属性禁用任何面板。

<mat-expansion-panel disabled>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

要以编程方式禁用面板，请参考下面对我有用的 sn-p。
注意：应该评估为真或假

<mat-expansion-panel [disabled]="<CONDITION>">
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>

【讨论】：