Question

我在网站上使用的是角材8.2.3。但是目前，我遇到了一个看似简单的问题。我想水平地而不是垂直地订购桌子。

我的表仅包含两列。这是代码：

<table mat-table [dataSource]="items" class="mat-elevation-z8 table-hover">

  <ng-container matColumnDef="percent">
    <th mat-header-cell *matHeaderCellDef> %</th>
    <td mat-cell *matCellDef="let items">{{items.percent}}</td>
  </ng-container>

  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> val. </th>
    <td mat-cell *matCellDef="let items">{{items.value}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

结果表如下：

|------|------|
|  %   | val. |
|------|------|
|   1  |   5  |
|   2  |   4  |
|   3  |   3  |

但是我想要的是这个

|------|------|------|------|
|  %   |   1  |   2  |   3  |
|------|------|------|------|
| val  |   5  |   4  |   3  |
|------|------|------|------|

我该怎么做？

Answer 1

使用原生SELECT SUM(LEN(Holidays) - LEN(REPLACE(Holidays, ',', '')) + 1) FROM [dbo].[OhLog]可能很难实现这一目标，但是使用public void AddBtn() { RemoveButton(); for (int i = 0; i < items.Count; i++) { indexer = i; ShopItem activeOne = items[indexer]; go = Instantiate(prefabBtn, parentBtn); btn = go.GetComponent<_button>(); btn.indexer = indexer; btn.TheItems.sprite = items[indexer].theitem; btn.button.onClick.AddListener(() =>chooseItem(indexer)); } } public void chooseItem(int index) { Debug.Log(index); }指令和来自table的一些帮助非常容易：

MatTable

Stackblitz demo

Answer 2

我希望mat-table有一个隐藏的技巧或属性，可以在某个方向上渲染表格，但是显然没有。

由于使用CSS魔术的建议解决方案并未真正带来预期的结果，因此我决定在不使用此类材料的情况下对表进行编码：

<table style="width:100%; margin-top: 10pt;">
  <tr>
    <th>Percent:</th>
    <td class="right" *ngFor="let i of items">
      {{i.percent}} %
    </td>
  </tr>
  <tr>
    <th>Value:</th>
    <td class="right" *ngFor="let i of items">
      {{i.value}}
    </td>
  </tr>
</table>

使用普通桌子，非常容易实现水平布局。我现在要做的只是一点CSS，使它看起来像我的其他表一样。

仍然感谢您的帮助。要知道，使用mat-table做到这一点没有简单的方法，这也是很有价值的一课。

Answer 3

我也在努力寻找使用Mat-Table的类似解决方案，但是它不可用。

所以我以与https://stackoverflow.com/a/59246035/13834563相同的方式前进。

即使我没有编写看起来像Mat-table的自定义CSS，但是我还是使用了来自材料CSS的现有CSS类，并在HTML中做了一些改动（添加{{ 1}}，<thead>）。

类似的东西-

<tbody>

这将使<table class="mat-table"> <thead> <tr> <th class="mat-header-cell">Percent:</th> <td class="mat-cell" *ngFor="let i of items"> {{i.percent}} % </td> </tr> </thead> <tbody> <tr> <th class="mat-header-cell">Value:</th> <td class="mat-cell" *ngFor="let i of items"> {{i.value}} </td> </tr> </tbody> </table>与没有自定义CSS的mat-table完全相似。

Answer 4

使用MatTable本身很难做到这一点，但是您可以使用scss或css技巧来实现此目的。

在MatTable上使用下面的类，就像@dev提到的那样，您可以使用flex。它也是正确的。唯一简单的方法是通过css的{{1}}或scss覆盖。

MatTable

如何使用Angular Material（mat-table）创建水平方向的表

4 个答案: