在angular ui网格中添加动态列，但不显示列值

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  gridOptions: GridOptions;
  columnDefs: any[];
  rowData: any[];

  constructor() {
    this.gridOptions = <GridOptions>{};
    this.columnDefs = [
      // 初始列定义
      { headerName: '姓名', field: 'name' },
      { headerName: '年龄', field: 'age' }
    ];
    this.rowData = [
      // 初始数据
      { name: '张三', age: 25 },
      { name: '李四', age: 30 }
    ];
  }
}

<ag-grid-angular
  style="width: 500px; height: 200px;"
  class="ag-theme-alpine"
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefs"
  [rowData]="rowData">
</ag-grid-angular>

addColumn() {
  const newColumn = { headerName: '新列', field: 'newColumn' };
  this.columnDefs.push(newColumn);
  this.gridOptions.api.setColumnDefs(this.columnDefs);
}