在 Angular9 的 mat-table 中,我如何强制 mat-cell 中的 DIV 开始新行?
In Angular9's mat-table, how do I enforce that DIVs within a mat-cell start new lines?
我正在使用 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 仍然出现在同一水平线上。
你试过如下吗?
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%;
}
希望对您有所帮助。如果这不是您的要求,那么再澄清一点。
您错误地使用了 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
我正在使用 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 仍然出现在同一水平线上。
你试过如下吗?
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%;
}
希望对您有所帮助。如果这不是您的要求,那么再澄清一点。
您错误地使用了 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