如何动态更改mat-grid-list中的Col和RowHeight

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { MatGridList } from '@angular/material/grid-list';

@ViewChild('gridList', { static: false }) gridList: MatGridList;

<mat-grid-list #gridList [cols]="cols" [rowHeight]="rowHeight">
  <!-- grid tiles here -->
</mat-grid-list>

cols: number = 3;
rowHeight: string = '1:1';

constructor(private renderer: Renderer2) {}

changeGridProperties() {
  // Change cols and rowHeight dynamically
  this.cols = 4;
  this.rowHeight = '2:1';

  // Update grid properties in the DOM
  this.renderer.setAttribute(this.gridList._elementRef.nativeElement, 'cols', this.cols.toString());
  this.renderer.setAttribute(this.gridList._elementRef.nativeElement, 'rowHeight', this.rowHeight);
}