在md-grid-tile中使用md-grid-list

Question

在plunkr中，我已从此

更改了我的grid-list-overview-example.html

<md-grid-list cols="2" rowHeight="2:1">
    <md-grid-tile>1</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>

对此：

<md-grid-list cols="2" rowHeight="2:1">
     <md-grid-tile>1</md-grid-tile>
     <md-grid-tile>2</md-grid-tile>
     <md-grid-tile>3</md-grid-tile>
     <md-grid-tile>
           <md-grid-list cols="2" rowHeight="2:1">
                 <md-grid-tile>1</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>
     </md-grid-tile>
</md-grid-list>

理想情况下，父网格的第4个图块中应该有编号为1,2,3,4的图块，但子网格的所有图块都设置为宽度为0.

这里还有什么需要做的吗？

有解决方法，但我正在寻找标准解决方案。

Answer 1

看起来specs不打算嵌套网格列表。因此，你想要完成的事情并不容易。将内部网格列表放在一个单独的组件中看起来像一个干净的解决方法，很可能会工作（未经测试）。

此外，似乎these guys通过使用flexbox找出了另一种适用于angularjs的workaround。

    <md-grid-list flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
        md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"
        md-gutter-gt-sm="4px" class="gridList" layout="row">
        <md-grid-tile md-colspan="1" md-colspan-sm="1" class="gridTile">
            <md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
              md-rows-md="4" layout-fill>
              <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col" 
                class="flexTile">
                Tile
              </md-grid-tile>
              <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col"
                class="flexTile">
                Tile
              </md-grid-tile>
              <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col"
                class="flexTile">
                Tile
              </md-grid-tile>
              <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col"
                class="flexTile">
                Tile
              </md-grid-tile>
              <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col"
                class="flexTile">
                Tile
              </md-grid-tile>
              <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col"
                class="flexTile">
                Tile
              </md-grid-tile>
              <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col"
                class="flexTile">
                Tile
              </md-grid-tile>
            </md-grid-list>
            <md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
        </md-grid-tile>
    </md-grid-list>