Angular ag-grid: установить gridOptions из полей @input

Question

Цель: обернуть компонент 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>

Скорее всего, проблема связана с привязкой gridOptions до установки значения @input в нерабочий пример. Но не уверен, как решить эту проблему.

Answer 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>

надеюсь, это поможет вам сообщить мне, если возникнет какая-либо проблема

спасибо