我正在尝试在Angular 6组件中构建包含6列的表。表格标题中的前三列是固定宽度（以像素为单位），我的目标是获取其余三列的宽度以填充剩余的表格宽度，以便整个表格填充屏幕的整个宽度，然后将其传递给子组件的值相同，每表行重复一次。最好的方法是什么？
它变得复杂，因为我不知道如何按照视图/页面的呈现顺序来适应这个过程。
我的初始方法是这样做的： css文件将前三列的宽度（以像素为单位）分配，其余三列的宽度分配为相等的百分比。一个视图已呈现，在我的组件中，我使用 ngAfterViewChecked 方法获取整个表格的宽度，减去前三列（以像素为单位），然后将后三列重新分配为其余部分的一部分通过模板中的样式标签的表格宽度。这只是为了头部。我还将值向下传递给组成每个表行的子组件。这似乎太过分了-甚至都行不通（它不会将它们重新绘制为适当的宽度），并且子组件实际上将第二次重新绘制而不会擦除。
如何更改它以使其按预期运行？
我的代码如下：
<thead>
<tr #stickyMenu [class.sticky]="sticky">
<th #title scope="col" id="th0">Monitoring Point</th>
<th #networkHealth scope="col" id="th1">Network Health<br><small id="more_detail">(Click icon to see more detail)</small></th>
<th #activeAlerts scope="col" id="th2">Active Alerts</th>
<th [width]="eachChart" scope="col" id="th3">Flow (ft3/s) <i class='fa fa-info-circle op-icon'
matTooltip="Velocity will be displayed when there are no flow values available."></i></th>
<th [width]="eachChart" scope="col" id="th4">Water Temperature (°F)</th>
<th [width]="eachChart" scope="col" id="th5">Depth Readings (in)</th>
</tr>
</thead>
</table>
<table id="tablebottom" class="table">
<tbody >
<tr *ngFor="let item of monitoring_points">
<app-sensor-summary [mp]="item"></app-sensor-summary>
</tr>
</tbody>
</table>
CSS
#th0 {
max-width: 175px!important;
padding-left: 10px;
}
#th1 {
max-width: 125px!important;
}
#th2 {
max-width: 185px!important;
padding-left: 20px;
}
#th3 {
min-width: 20%!important;
max-width: 20%!important;
}
#th4 {
min-width: 20%!important;
max-width: 20%!important;
}
#th5 {
min-width: 20%!important;
max-width: 20%!important;
}
.sticky{
position: fixed;
top: 0;
z-index: 12;
background-color: #fff;
width:93%;
padding-bottom: 15px;
padding-right:20px!important;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
-webkit-box-shadow-bottom:0px 1px 6px grey;
-moz-box-shadow-bottom:0px 1px 6px grey;
box-shadow:0px 1px 3px #cccccc;
}
在我的组件中：
@ViewChild("stickyMenu", {read: ElementRef}) tr: ElementRef;
@ViewChild("title", {read: ElementRef}) title: ElementRef;
@ViewChild("networkHealth", {read: ElementRef}) networkHealth: ElementRef;
@ViewChild("activeAlerts", {read: ElementRef}) activeAlerts: ElementRef;
...
ngOnInit() {...}
ngAfterViewChecked(){
this.allChartWidths = (this.title.nativeElement.offsetWidth + this.networkHealth.nativeElement.offsetWidth + this.activeAlerts.nativeElement.offsetWidth)
this.rowWidth = this.tr.nativeElement.offsetWidth
this.eachChart= Math.round((this.rowWidth-this.allChartWidths)/3)
console.log(this.allChartWidths, this.rowWidth, this.eachChart);
}
//this.eachChart is then assigned as the 'width' for the last three 'th's in the template above,
//AND passed down to the columns in the child component which uses them as well for each table row
@HostListener('window:scroll', ['$event'])
handleScroll(elementPosition) {
this.sticky = (window.pageYOffset >= this.elementPosition);
}