内容在弹性布局角度中没有响应

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 然后它将以响应方式完美运行