Angular 6アプリケーションで "AGグリッド"のコミュニティエディションを使用しています。
今の私の課題はこれです:私はかなり単純なデータ構造を持っており、そのリストは表示のためにグリッドにバインドされます。その値に基づいて、グリッドに「アクション」列を追加して、ユーザーが特定のアクションにアクセスできるようにします。エントリを削除したり、「プロモート」したりします。
個々のデータバインドされた列について、バインドされている各行の対応するデータ値を取得します。たとえば、 セルレンダラーを使用して表示をフォーマットします。 「アクション」列(クラスの特定のデータ要素にバインドされていない)と同様のことを実行できることを望んでいましたが、「アクションセルレンダラー」はベースに何も取得していないようですその決定。
私は次のようなデータ構造を持っています:
export interface Indicator {
Id: string;
Name: string;
IsGlobal: boolean;
}
これらのIndicators
の配列は、my AngularコンポーネントのOnInit
関数でAGグリッドにバインドされています。
AGグリッドの列を次のように定義します。
columnDefs = [
{ headerName: 'Name', field: 'Name', width: 200, editable: true },
{ headerName: 'Global', field: 'IsGlobal', editable: false, width: 100,
cellRenderer: (data) => {
// here, "data" refers to the "IsGlobal" value of the row being displayed
if (data.value === true) {
return 'Ja';
} else {
return 'Nein';
}
},
},
{ headerName: 'Actions', width: 125,
cellRenderer: (data) => {
// here, I was hoping the "data" would refer to the entire
// row / object being bound, so that I could check for
// certain conditions to be true (or false)
if (data.IsGlobal.value === true)
{
return '<span class="far fa-trash-alt mr-2" title="Delete entry"></span>' +
'<span class="fab fa-nintendo-switch" title="Promote entry"></span>';
}
else
{
return '<span class="far fa-trash-alt mr-2" title="Delete"></span>';
}
}
}
];
列定義で、アクション列に「エントリの昇格」ボタンが表示されることを定義できるようにしたいIFのみ現在問題の行のデータにIsGlobal = false
。セルレンダラーに渡されるdata
が(タイプIndicator
の)行データオブジェクト全体になることを期待していましたが、そうではないようです。
列定義の[アクション]列に表示するアイコンを決定するにはどうすればよいですか?
on cellRenderer
-オブジェクトを表す params
値を取得します:
interface ICellRendererParams {
value: any, // value to be rendered
valueFormatted: any, // value to be rendered formatted
getValue: ()=> any, // convenience function to get most recent up to date value
setValue: (value: any) => void, // convenience to set the value
formatValue: (value: any) => any, // convenience to format a value using the columns formatter
data: any, // the rows data
node: RowNode, // row rows row node
colDef: ColDef, // the cells column definition
column: Column, // the cells column
rowIndex: number, // the current index of the row (this changes after filter and sort)
api: GridApi, // the grid API
eGridCell: HTMLElement, // the grid's cell, a DOM div element
eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection
columnApi: ColumnApi, // grid column API
context: any, // the grid's context
refreshCell: ()=>void // convenience function to refresh the cell
}
したがって、row-data
にアクセスするには、params.data
またはparams.node.data
を使用する必要があります
cellRenderer: (params) => {
if (params.data.IsGlobal.value === true)
{
...
}
else
{
...
}
}
ただし覚えておいてください、インラインcellRenderer
を使用する場合--必要なロジック処理のためにHTML
テンプレートのみを実装できます(ロジックなし)必要な関数などを含むカスタムcellRenderer
を作成します。
component
インライン実装を介してcellRenderer
関数を実行することはできません