如何禁用<md-expansion-panel>材料 2 角度 2</md-expansion-panel>

Question

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

可以使用 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"
")

有什么帮助吗？

Answer 1

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

Answer 2

'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>

要以编程方式禁用面板，请参考以下对我有用的代码片段。
注意：<CONDITION> 应评估为真或假

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

Answer 3

当我查看 mat-expansion-panel 代码（ selector: 'mat-expansion-panel' ）时，我发现它确实已禁用作为其输入之一（ inputs: ['disabled', 'expanded'] ）但我不没看到有人用...

我可以建议一个解决方法：在垫子扩展面板上设置pointer-events: none 。

Answer 4

这个例子有效

<mat-expansion-panel [hideToggle]="true" class="mat-elevation-z0">
      <mat-expansion-panel-header>
        <mat-panel-title>Servidores virtuales</mat-panel-title>
      </mat-expansion-panel-header>
    </mat-expansion-panel>