角材料扩展删除ngIf

Question

我在可折叠的侧面导航内有一个Angular（8）材质扩展面板。

到目前为止，无论侧面导航器是打开还是关闭，扩展面板都将激活。 关闭面板时，图标不应执行任何操作。仅当侧面导航处于打开位置（宽）时，项目才应展开/折叠。随附的图像显示侧面导航已关闭。人字形作为材料扩展面板的一部分进行渲染。一旦扩展能力消失，它们就会消失。

总而言之，当侧面导航！isExpanded 时，我想从dom中删除打开扩展面板的功能。 <mat-expansion-panel [disabled]="isDisabled">将禁用面板。

理想情况下，我想学习如何做两件事：

1. 在侧面导航关闭时停用/删除扩展功能，ngif。

2. 通过Javascript，当！isExpanded css display：none; 渲染。我可以将人字形隐藏起来只是一个半美元的解决方案，但实际上整个过程都需要进行。但是我仍然想看看如何以编程的方式做到这一点。

HTML：

  <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-icon *ngIf="!isExpanded">
          <fa-icon [icon]="faCheck"></fa-icon>
        </mat-icon>
        <p *ngIf="isExpanded">
          <fa-icon [icon]="faCheck"></fa-icon>
          <span class="forms">Buttons & Indicators</span></p>
      </mat-expansion-panel-header>
      <p *ngIf="!isExpanded" p>content</p>
    </mat-expansion-panel>

 </mat-sidenav> 
</mat-sidenav-container>

渲染器：

<mat-expansion-panel _ngcontent-lgo-c0="" class="mat-expansion-panel ng-tns-c8-7 ng-star-inserted" style=""><mat-expansion-panel-header _ngcontent-lgo-c0="" class="mat-expansion-panel-header ng-tns-c9-8 ng-trigger ng-trigger-expansionHeight ng-star-inserted" role="button" id="mat-expansion-panel-header-3" tabindex="0" aria-controls="cdk-accordion-child-3" aria-expanded="false" aria-disabled="false" style="height: 48px;" data-ol-has-click-handler=""><span class="mat-content"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><mat-icon _ngcontent-lgo-c0="" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true" style=""><fa-icon _ngcontent-lgo-c0="" class="ng-fa-icon" ng-reflect-icon="[object Object]"><svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></fa-icon></mat-icon><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-if": "true"
}-->**<span class="mat-expansion-indicator ng-tns-c9-8 ng-trigger ng-trigger-indicatorRotate ng-star-inserted" style="transform: rotate(0deg);"></span>**</mat-expansion-panel-header><div class="mat-expansion-panel-content ng-trigger ng-trigger-bodyExpansion" role="region" aria-labelledby="mat-expansion-panel-header-3" id="cdk-accordion-child-3" style="height: 0px; visibility: hidden;"><div class="mat-expansion-panel-body"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><p _ngcontent-lgo-c0="" p="" class="ng-star-inserted" style="">content</p><!--bindings={}--></div></div></mat-expansion-panel>

组件：

import { Component } from '@angular/core';
import { faFileAlt} from '@fortawesome/free-solid-svg-icons';
import {faBars} from '@fortawesome/free-solid-svg-icons/faBars';
import {faChevronLeft} from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import {faLocationArrow} from '@fortawesome/free-solid-svg-icons/faLocationArrow';
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
import {faTable} from '@fortawesome/free-solid-svg-icons/faTable';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'style-guide';
  // opened = 'opened';
  isExpanded = false;
  faBars = faBars;
  faChevronLeft = faChevronLeft;
  faFileAlt = faFileAlt;
  faLocationArrow = faLocationArrow;
  faCheck = faCheck;
  faWindowRestore = faWindowRestore;
  faTable = faTable;
}

谢谢！

Answer 1

我浏览了材料文档和侧面导航栏中的一个栏，并且在任何地方都没有建议进行扩展/收缩的栏。当我发现我为一个合法的UX约定付出了太多的努力时（相当简单），我开始意识到这虽然不是一个好的解决方案。我的主要收获是，在开始创建内容之前，请查看材料文档的可用性约定，以遍历线框。

Answer 2

HTML：

  <mat-expansion-panel [disabled]="!isExpanded">
   <mat-expansion-panel-header>
    <mat-icon>
      <fa-icon [icon]="faCheck"></fa-icon>
    </mat-icon>
    <p>
      <fa-icon [icon]="faCheck"></fa-icon>
      <span class="forms">Buttons & Indicators</span></p>
   </mat-expansion-panel-header>
   <p>content</p>
  </mat-expansion-panel>