javascript - Hur kan jag ha nästlade grid-listor i Angular Material?

När jag försöker nästla rutor i Angular försvinner den interna rutan. Här är ett exempel: https://stackblitz.com/edit/angular-eib7wz

Jag försökte leka med kolumnegenskapen men jag får fortfarande ett liknande resultat, det inbäddade rutnätet visas inte alls.

Jag använder rutenätlistan för att dela upp min sida i små sektioner och i varje sektion vill jag placera en annan komponent och en av dessa komponenter är ett annat mindre rutenät.

Jag är öppen för förslag. Tack för hjälpen.

Svar #1

Rutnätet visas när det är inbäddat, men endast storleken noll... så vi lägger till en div och stylar den... jag satte medvetet min-width:80%... för att uppnå ditt mål, kanske du vill sätta min-width:100%:

lägg till följande relevanta CSS:

.internalMatGrid{  border:1px solid red; min-width:80%;}

relevant HTML:

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>
    <div class='internalMatGrid' >
      <mat-grid-list cols="2" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
        <mat-grid-tile>2</mat-grid-tile>
        <mat-grid-tile>3</mat-grid-tile>
        <mat-grid-tile>4</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

du kan kolla en fungerande stackblitz här

Relaterade artiklar