Контент не реагирует на гибкие макеты angular - PullRequest
Новая
       2

Контент не реагирует на гибкие макеты angular

0 голосов
/ 10 июля 2020

Содержимое home.component. html действует без отклика, но когда я помещаю код home.component. html непосредственно в app.component. html, он действует быстро и отлично. Однако в home.component. html он показывает только некоторую часть пользовательского интерфейса и не масштабируется. Если вы знаете, в чем проблема, дайте мне знать

Код компонента 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>

1 Ответ

1 голос
/ 10 июля 2020

Сначала проверьте, что все необходимые модули добавлены в файл модуля, затем удалите родительский div: 

 <div fxFlexFill class="example-container">

из home.component. html, тогда он будет отлично работать в отзывчивый способ

...