如何在Angular中调整mat-header-cell宽度？

<mat-table>
  <ng-container matColumnDef="column1">
    <mat-header-cell #headerCell1>Column 1</mat-header-cell>
    <mat-cell>Value 1</mat-cell>
  </ng-container>
  
  <mat-header-row>
    <mat-header-cell #headerRowCell1>Header 1</mat-header-cell>
  </mat-header-row>
  
  <mat-row>
    <mat-cell>Cell 1</mat-cell>
  </mat-row>
</mat-table>

import { Component, ViewChild, ElementRef, Renderer2, AfterViewInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements AfterViewInit {
  @ViewChild('headerCell1', { static: true }) headerCell1: ElementRef;
  @ViewChild('headerRowCell1', { static: true }) headerRowCell1: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.adjustHeaderCellWidth();
  }

  adjustHeaderCellWidth() {
    const headerCellWidth = '200px'; // 设置宽度，可以是固定值或百分比
    this.renderer.setStyle(this.headerCell1.nativeElement, 'width', headerCellWidth);
    this.renderer.setStyle(this.headerRowCell1.nativeElement, 'width', headerCellWidth);
  }

  @HostListener('window:resize')
  onWindowResize() {
    this.adjustHeaderCellWidth(); // 监听窗口大小变化，动态调整宽度
  }
}