英文:
How to use footer with colspan to align total in mat table
问题
需要在金额列下方显示总计。
目前，我正在使用margin-left属性来在金额列下方显示总计。由于这不起作用，有人能否建议我如何使用具有colspan的表底部来实现这一目标？
英文:
Need to show the total below the amount column.
Currently, I'm using the margin-left property to show the total below the amount column. Since this is not working properly, could someone suggest to me how to achieve this using a table footer with colspan?
<a href="https://stackblitz.com/edit/angular-mat-table-design-mxj3ho?file=src/app/app.component.html">Demo</a>
答案1
得分: 1
- 在
<tr mat-row>元素之后添加以下行：
<tr mat-footer-row *matFooterRowDef="columnsToDisplay"></tr>
- 确保每个元素都包含
matColumnDef属性，如下所示：
<td mat-footer-cell *matFooterCellDef></td>
- 对于
Amount元素，mat-footer-cell应该是：
<td mat-footer-cell *matFooterCellDef> 总计：{{ getTotal() }} </td>
英文:
You need the mat-footer-row as mentioned in the comment.
- Add this line:
<tr mat-footer-row *matFooterRowDef="columnsToDisplay"></tr>
after <tr mat-row> element.
- Make sure each element contains
matColumnDefattribute must have:
<td mat-footer-cell *matFooterCellDef></td>
- For
Amountelement, themat-footer-cellshould be:
<td mat-footer-cell *matFooterCellDef> Total: {{ getTotal() }} </td>
答案2
得分: 0
I am able to do it using mat-footer-row
Below need to add for each column
For amount column
below needs to be added
英文:
I am able to do it using mat-footer-row
Below need to add for each column
<td mat-footer-cell *matFooterCellDef></td>
For amount column
<td mat-footer-cell *matFooterCellDef>{{getTotalCost() | currency}}</td>
below needs to be added
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
<a href="https://stackblitz.com/edit/kp2rjx?file=src%2Fapp%2Ftable-footer-row-example.ts,src%2Fapp%2Ftable-footer-row-example.html">Demo</a>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论