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

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

component.ts

已禁用设定值 - this.isDisabled = true;

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

Answer 3

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

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

如何禁用<md-expansion-panel> maetrial2 angular2

3 个答案: