内容在 flex 布局中没有响应 angular

Question

home.component.html 的内容反应迟钝，但是当我将 home.component.html 的代码直接放入 app.component.html 时，它会反应灵敏并完美运行。但是，在 home.component.html 中它只显示 UI 的一部分并且不缩放。如果有人知道问题出在哪里，请告诉我

home.component.html 文件的代码是：

<div fxFlexFill class="example-container">
  <div fxLayout="column" fxLayoutGap="32px" [style.height]="'100%'">
    <mat-card class="card-margins">
      <mat-card-title></mat-card-title>
       <div
         fxLayout="row"
         fxLayoutGap="32px"
         fxLayout.lt-sm="column"      
         fxLayoutGap.lt-sm="10px">
       <div fxFlex="0 0 50%">
          <img mat-card-image src="../assets/image.png" alt="Free image">
       </div>
      </div>
      <div fxFlex="0 0 calc(50%-36px)">
         <mat-card-content>
           Bacon ipsum dolor amet corned beef biltong short loin frankfurter. Shoulder bresaola
        tongue chuck, boudin buffalo meatloaf andouille chicken picanha alcatra cow fatback t-bone prosciutto. Biltong
        meatloaf shank, beef boudin brisket prosciutto andouille burgdoggen turducken. Jerky alcatra porchetta swine
        prosciutto, andouille shank pig beef ribs burgdoggen capicola. Pork swine frankfurter, rump ham hock beef ribs
        ham
        ball tip jerky turkey ground round prosciutto.

        <p>Shankle spare ribs brisket jerky, beef ribs bacon kielbasa. Cow ground round pig landjaeger, chicken chuck
          capicola strip steak turkey swine porchetta. Swine burgdoggen meatball capicola ham, pork belly pancetta
          kielbasa
          fatback pastrami. Ham tongue flank, drumstick pastrami pork loin ground round. Doner tongue tenderloin, corned
          beef cupim pork frankfurter short loin chuck salami meatball.</p>
      </mat-card-content>
      </div>
  </mat-card>

  <div
    fxLayout="row wrap"
    fxLayout.lt-sm="column"
    fxLayoutAlign="space-between stretch"
    class="card-margins">

    <ng-container *ngFor="let _ of [1,2,3,4,5,6]">
      <div   
        fxFlex="32"
        fxFlex.lt-md="49"
        fxFlex.lt-sm="99"
        style=""
        fxFill>
      <mat-card style="margin-bottom: 10px">
        <mat-card-title>Card nr. {{_}}</mat-card-title>
        <img mat-card-image src="https://images.huffingtonpost.com/2015-03-22-1427023616-8757697-BlackBeanSaladwithChipotleVinaigrette.jpg" alt="Placeholder">
        <mat-card-content>
          <p>Bacon ipsum dolor amet corned beef biltong short loin frankfurter. Shoulder bresaola
            tongue chuck, boudin buffalo meatloaf andouille chicken picanha alcatra cow fatback t-bone prosciutto.
            Biltong meatloaf shank, beef boudin brisket prosciutto andouille burgdoggen turducken. Jerky alcatra
            porchetta swine prosciutto, andouille shank pig beef ribs burgdoggen capicola. Pork swine frankfurter,
            rump ham hock beef ribs ham ball tip jerky turkey ground round prosciutto.</p>

          <p *ngIf="_>1">Shankle spare ribs brisket jerky, beef ribs bacon kielbasa. Cow ground round pig landjaeger, chicken chuck
            capicola strip steak turkey swine porchetta. Swine burgdoggen meatball capicola ham, pork belly pancetta
            kielbasa
            fatback pastrami. Ham tongue flank, drumstick pastrami pork loin ground round. Doner tongue tenderloin,
            corned
            beef cupim pork frankfurter short loin chuck salami meatball.</p>
        </mat-card-content>
        <mat-card-footer>
          <button mat-button>
            <mat-icon>thumb_up_alt</mat-icon>
            Like
          </button>
          <button mat-button>
            <mat-icon>share</mat-icon>
            Share
          </button>
          <button mat-button>
            <mat-icon>forward</mat-icon>
            More info
          </button>
        </mat-card-footer>
      </mat-card>
      </div>
    </ng-container>
  </div>
</div>
</div>

app.component.html 文件的代码是：

<mat-sidenav-container>

  <mat-toolbar class="toolbar">
  <mat-toolbar-row>
      <div class="toolbar__logo-title-group"
      >
  
      <a routerLink="/"
      fxLayout>
     <img class="toolbar__logo"
          src="../assets/logo.png"
          alt="NgAuction Logo">
   </a>   
 </div>
 <div fxFlex></div>

    <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <div fxShow="true" fxHide.lt-md="true"> 
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>HOME</a>
      <a href="#" mat-button>About us</a>
      <a href="#" mat-button>Contact us</a>
      <a href="#" mat-button> Support</a>
    </div>
  </mat-toolbar-row>

</mat-toolbar>
  <mat-sidenav #sidenav position="end">
  <mat-nav-list>
      <a href="#" mat-list-item>
          HOME
      </a>
      <a href="#" mat-list-item>About us</a>
      <a href="#" mat-list-item>Contact us</a>
      <a href="#" mat-list-item>Support</a>
     
    </mat-nav-list>  </mat-sidenav>
    <router-outlet></router-outlet>

</mat-sidenav-container>

Answer 1

首先检查模块文件中是否添加了所有必需的模块，然后删除父模块 div:

 <div fxFlexFill class="example-container">

从 home.component.html 开始，它将以响应式的方式完美运行

内容在 flex 布局中没有响应 angular

Content is not responsive in flex layout angular

angular

angular-material

angular-flex-layout