Angular Material2 中的 md-grid-tile 内的 md-grid-list 不可见

Question

我有如下代码 Angular Material 2

    <md-grid-list cols="2" rowHeight="2:1">
      <md-grid-tile>1 
        <div>
          <md-grid-list cols="4" rowHeight="1:1">
            <md-grid-tile colspan="2">5</md-grid-tile>
            <md-grid-tile >6</md-grid-tile>
            <md-grid-tile>7</md-grid-tile>
            <md-grid-tile >8</md-grid-tile>
            <md-grid-tile >9</md-grid-tile>
          </md-grid-list>
        </div>
      </md-grid-tile>
      <md-grid-tile >2</md-grid-tile>
      <md-grid-tile>3</md-grid-tile>
      <md-grid-tile>4</md-grid-tile>
    </md-grid-list>

现在 ** div** 标签和 md-grid-list 在其中不可见。

已更新 - 相同的解决方案

        <md-grid-list cols="2" rowHeight="2:1">
      <md-grid-tile class="shape">1 
        <div class="shape1">
          <md-grid-list cols="2" rowHeight="1:1">
            <md-grid-tile >5</md-grid-tile>
            <md-grid-tile >6</md-grid-tile>
            <md-grid-tile>7</md-grid-tile>
            <md-grid-tile >6</md-grid-tile>
          </md-grid-list>
        </div>
      </md-grid-tile>
      <md-grid-tile class="shape">2</md-grid-tile>
      <md-grid-tile class="shape">3</md-grid-tile>
      <md-grid-tile class="shape">4</md-grid-tile>
    </md-grid-list>

其中 CSS 如下所示。

        .shape{       
            background:#ffd600;
        }
        .shape1{
            background:#651fff;   
            width: 50%;    
        }

Answer 1

那是因为您的 div 已折叠。像这样尝试：

<md-grid-list cols="2" rowHeight="2:1">
      <md-grid-tile>
         <div style="height: 100%; width: 100%; background-color: red;">
          <md-grid-list cols="2" rowHeight="2:1">
            <md-grid-tile>6</md-grid-tile>
            <md-grid-tile>7</md-grid-tile>
            <md-grid-tile>8</md-grid-tile>
            <md-grid-tile>9</md-grid-tile>
          </md-grid-list>
         </div>
        </md-grid-tile>
      <md-grid-tile >2</md-grid-tile>
      <md-grid-tile>3</md-grid-tile>
      <md-grid-tile>4</md-grid-tile>
</md-grid-list>

工作的笨蛋 here

Angular Material2 中的 md-grid-tile 内的 md-grid-list 不可见

md-grid-list inside md-grid-tile in Angular Material2 is not visible

angular-material2

angular