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

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 >应评估为 true 或 false

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

Answer 5

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

“垫扩展面板已禁用”

在 mat-expansion-panel 标签内添加此禁用属性