角材料扩展删除 ngIf

Question

我在可折叠的侧边导航中有一个 Angular(8) Material 扩展面板。

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

所以综上所述，当侧边导航!isExpanded时，我想从dom中去掉，打开展开面板的能力。 <mat-expansion-panel [disabled]="isDisabled"> 将禁用面板。

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

1. 关闭侧边导航时停用/移除展开功能，ngif。

2. BY 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

我查看了 Material 文档和侧导航栏中的一个栏，并且在任何地方都没有建议使用扩展/收缩的栏。当我发现如果它是一个合法的 UX 约定，我应该付出太多的努力，相当简单，我开始意识到这不是一个好的解决方案，尽管可能。我的收获是，在开始创建内容之前，请查看 Material 文档的可用性约定以检查线框图。

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>