Angular导航后未显示mat-header-cell
创始人
2024-10-24 00:00:07
0

此问题通常出现在使用Angular Routing时,因为组件更改导致表格头部单元格(mat-header-cell)未显示。

有两种解决方案:

1.在AppComponent中,添加以下代码:

import { Router, NavigationEnd } from '@angular/router'; import { filter } from 'rxjs/operators';

export class AppComponent { constructor(private router: Router) { this.router.events.pipe( filter((event) => event instanceof NavigationEnd) ).subscribe(() => { setTimeout(() => { // 延迟 250 毫秒以确保 Angular 中的导航完成 const matHeaderCells = document.querySelectorAll('.mat-header-cell'); matHeaderCells.forEach(cell => { cell.style.width = ${cell.clientWidth}px; }); }, 250); }); } }

这将在每次导航结束时,获取所有的表格头部单元格(mat-header-cell)并设置它们的宽度。

2.使用样式文件中的CSS代码,将以下代码添加到全局样式中:

.mat-header-cell { width: fit-content !important; }

这将使表格头部单元格(mat-header-cell)自适应其内容的宽度。

此外,还需要检查是否已正确导入MatTableModule并确保在页面中正确使用标记和相关的组件和指令。

相关内容

热门资讯

微扑克wpk透视辅助!wpk辅... 微扑克wpk透视辅助!wpk辅助挂(透视)往昔是真的有挂(详细辅助新2025教程),您好,微扑克wp...
透视中牌率!wpk脚本下载,哈... 透视中牌率!wpk脚本下载,哈糖大菠萝辅助器(详细辅助插件教程)1、点击下载安装,wpk脚本下载插件...
wepoke有挂!aa pok... wepoke有挂!aa poker智能ai辅助介绍(透视)从前是有挂(详细辅助规律教程)1、金币登录...
透视真的!aapoker俱乐部... 透视真的!aapoker俱乐部靠谱吗,约局吧德州真的存在透视吗(详细辅助2025新版);1)aapo...
aapoker有挂!扑克世界辅... aapoker有挂!扑克世界辅助软件(透视)固有真的有挂(详细辅助透明挂教程)1)aapoker有挂...
透视真的!红龙poker辅助,... 透视真的!红龙poker辅助,aapoker免费透视脚本(详细辅助软件教程);1)aapoker免费...
德扑之星辅助器购买!wopok... 德扑之星辅助器购买!wopoker系统套路(透视)从来真的是有挂(详细辅助技巧教程);致您一封信;亲...
透视科技!红龙poker透视,... 透视科技!红龙poker透视,hhpoker有没有外挂(详细辅助新2025版)1、红龙poker透视...
wepoke模拟器!wepok... wepoke模拟器!wepoke苹果版外挂(透视)一向存在有挂(详细辅助大神讲解)是一款可以让一直输...
wepoke的确有挂!德州wp... wepoke的确有挂!德州wpk辅助(透视)切实真的是有挂(详细辅助解密教程)是一款可以让一直输的玩...