在 Angular9 的 mat-table 中，我如何强制 mat-cell 中的 DIV 开始新行？

Question

我正在使用 Angular 9. 我已经定义了一个非常简单的 mat-table 元素 ...

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="article">
    <mat-cell *matCellDef="let article_stat">
      <div>Hello</div>
      <div>Good-bye</div>
    </mat-cell>
    </ng-container>
</mat-table>

这些是我在组件中仅有的样式...

.mat-row {
  border-bottom: 1px solid;
}

.mat-cell {
  padding-top: .5em;
  padding-bottom: .5em;
}

但是，当我的 table 渲染时，两个不同的 DIV 在同一水平面上对齐。

我认为 DIVs 应该换行到不同的行，特别是因为我没有应用任何额外的样式，但我不确定我还需要做些什么来恢复原来的 DIV行为。

编辑：根据答案，我尝试了这个

<mat-cell *matCellDef="let article_stat">
<div class="smallHeading">
{{ article_stat.article.path }}
</div>
<div class='mainRow'>
...
</div>
</mat-cell>

和css

.smallHeading, .mainRow {
  display: flex;
  flex-direction: column;
}

但 DIV 仍然出现在同一水平线上。

Answer 1

你试过如下吗？

HTML

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="article">
    <mat-cell *matCellDef="let article_stat">
      <div class="multi-line">
        <div>Hello</div>
        <div>Good-bye</div>
      </div>
    </mat-cell>
    </ng-container>
</mat-table>

CSS

.multi-line {
   display: block; width: 100%;
}

希望对您有所帮助。如果这不是您的要求，那么再澄清一点。

Answer 2

您错误地使用了 mat-table 和 mat-cell 指令。

您需要将指令作为属性放置在原始 table 和 td 元素上。

<table mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="article">
    <td mat-cell *matCellDef="let article_stat">
      <div>Hello</div>
      <div>Good-bye</div>
    </td>
    </ng-container>
</table>

现在，您的单元格内容将放在单独的行中:)

查看更多信息：https://material.angular.io/components/table/examples

在 Angular9 的 mat-table 中，我如何强制 mat-cell 中的 DIV 开始新行？

In Angular9's mat-table, how do I enforce that DIVs within a mat-cell start new lines?

html

css

angular9

mat-table