我有一个包含10个条目的水果列表.我想这样做,以便水果名称文本(在垫片旁边)显示在两列中,每列5个.我正在使用的芯片在这里:
https://material.angular.io/components/chips/api
我的CSS:
- .flexp {
- display: flex;
- flex-wrap:wrap;
- }
- .flexc {
- flex-grow: 1;
- display: inline-block;
- }
HTML
- <div class="flexp" *ngFor="let fruit of fruits">
- <div class="flexc">
- <mat-chip>
- {{fruit.typeOfFruit}}
- </mat-chip>
- {{fruit.name}}
- </div>
- </div>
我怎样才能做到这一点?现在我的flexBox从上到下.
我想制作它看起来像一个表,但不必创建结构.如果有一种方法让ngFor足够聪明,以这种方式显示……这就是我要找的东西:
- <table>
- <tr>
- <td>Fruit 1</td><td>Fruit 6</td>
- <td>Fruit 2</td><td>Fruit 7</td>
- <td>Fruit 3</td><td>Fruit 8</td>
- <td>Fruit 4</td><td>Fruit 9</td>
- <td>Fruit 5</td><td>Fruit 10</td></tr>
- </table>
如果不可能,请说明.
解决方法
MatGridList就是出于这个原因而提供的.
- <mat-grid-list cols="2" rowHeight="48px">
- <mat-grid-tile *ngFor="let fruit of fruits">
- <div class="flexc">
- <mat-chip>
- {{fruit.typeOfFruit}}
- </mat-chip>
- {{fruit.name}}
- </div>
- </mat-grid-tile>
- </mat-grid-list>