Angular ag-grid：从@input 字段设置 gridOptions

【问题标题】：Angular ag-grid: set gridOptions from @input fieldsAngular ag-grid：从@input 字段设置 gridOptions
【发布时间】：2020-05-15 02:19:34
【问题描述】：

目标：包装 ag-grid-angular 组件，使用来自@input 的数据来设置 gridOptions。

//wrapper component
// .html 
<ag-grid-angular
         [gridOptions]="gridOptions"
         [columnDefs]="..."
         [rowData]="...">
</ag-grid-angular>

// .ts this works
export class GridComponent implements OnInit {
  private gridOptions = {animateRows: true}
}

// this does not work (rows are not animated)
export class GridComponent implements OnInit {
  @Input() rowAnimation: Boolean = false
  private gridOptions = {}
  ngOnInit() {
    if (this.rowAnimation) {
       this.gridOptions['animateRows'] = true
    }
  }
}

// component using wrapper
// .html
<app-grid [rowAnimation] ="true"> </app-grid>

问题很可能与在非工作示例中设置 @input 值之前的 gridOptions 绑定有关。但不知道如何解决这个问题。

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

我尝试过使用下面的代码

网格组件模板文件

<ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions"
[animateRows]="animateRow">
</ag-grid-angular>

网格组件ts文件

@Component({
  selector: "app-my-grid-application",
  templateUrl: "./my-grid-application.component.html"
})
export class MyGridApplicationComponent {
  private gridOptions: GridOptions;
  @Input("animateRow")
  animateRow: boolean = false;
  constructor() {
    this.gridOptions = <GridOptions>{
      enableSorting: true
    };
    this.gridOptions.columnDefs = [
      { headerName: "ID", field: "id", width: 100 },
      { headerName: "Value", field: "value", width: 100 }
    ];
    this.gridOptions.rowData = [{ id: 5, value: 10 }, { id: 10, value: 15 }];
  }
}

在我的 app.component.html 中

<app-my-grid-application [animateRow]="true"></app-my-grid-application>

如果有任何问题，希望对您有所帮助

谢谢

【讨论】：