Responsive design 角度材质FlexLayout fxHide不隐藏

我正在使用flex布局开发mat stepper。每个步骤都包含和图标以及一个段落，以使其更具责任感和可读性。我想在较小的屏幕上隐藏段落，只留下图标。根据我的理解，如果分辨率低于small，fxHide.lt-sm应该隐藏元素，但不幸的是，没有发生任何事情，它看起来是这样的：

代码如下：

<mat-horizontal-stepper>
  <mat-step>
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>format_list_numbered</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Grades</p>
        </li>
      </ul>
    </ng-template>
    <app-grades></app-grades>
  </mat-step>
  <mat-step label="Student">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>account_circle</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Student</p>
        </li>
      </ul>
    </ng-template>
    <app-user></app-user>
  </mat-step>
  <mat-step label="Teachers">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>people</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Teachers</p>
        </li>
      </ul>
    </ng-template>
    <app-teachers></app-teachers>
  </mat-step>
  <mat-step label="Messages">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>message</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Messages</p>
        </li>
      </ul>
    </ng-template>
    <app-messages></app-messages>
  </mat-step>
</mat-horizontal-stepper>

格式\u列表\u编号


等级





会计圈


学生





人


教师





消息


信息

---

FxLayoutModule包含在app.module.ts的导入中

FlexLayoutModule必须导入到所有希望使用它的模块中

import { FlexLayoutModule } from '@angular/flex-layout';

---

FlexLayoutModule必须导入到所有希望使用它的模块中

import { FlexLayoutModule } from '@angular/flex-layout';

---

有一个关于这个问题的报告，也许更改您的版本可以解决它。您是否导入了正确的模块？或者您将

FlexLayoutModule

拼写为

FxLayoutModule

是一个打字错误？谢谢您的回复。事实上，我不知道FlexLayoutModule不能在模块之间共享，必须将其显式导入到使用flex的每个模块中。有一个关于此问题的报告，也许更改您的版本可以解决此问题。您是否导入了正确的模块？或者您将

FlexLayoutModule

拼写为

FxLayoutModule

是一个打字错误？谢谢您的回复。实际上，我不知道FlexLayoutModule不能在模块之间共享，必须显式地将其导入使用flex的每个模块。这给了我

FlexLayoutModule不是角度模块

y安装了

@Angular/flex layout

并没有抱怨

导入{FlexLayoutModule}来自“@角度/柔性布局”。你知道那可能是什么吗？你安装了angular cdk吗？npm安装——保存@angular/cdkyes我做了，我不知道问题出在哪里，但我删除了node_模块并运行了
npm I
，它被修复了。无论如何，谢谢，这是给我的，
FlexLayoutModule不是一个角度模块
y安装了
@Angular/flex布局
没有抱怨从“@Angular/flex布局”导入{FlexLayoutModule}。你知道那可能是什么吗？你安装了angular cdk吗？npm安装——保存@angular/cdkyes我做了，我不知道问题出在哪里，但我删除了node_模块并运行了
npm I
，它被修复了。无论如何，谢谢