typescript 角形ag-grid CellRenderer按原样呈现HTML字符串

mrphzbgm 于 2022-11-18 发布在 TypeScript

关注(0)|答案(1)|浏览(158)

我正在使用ag-grid，并希望在“index”列的每个单元格中添加一个微调器：

index_col_def = {
  headerName: "ID",
  field: "index",
  cellRenderer: params => {
    return `<div><spinner [show]=spinners.row_${params.data.index}>${params.data.index}</div>`;
   },
}

但是当渲染ag-grid时，结果是一个“spinner”标记，其中[show]位于括号中，这意味着它还没有真正“转换”到spinner组件中。有没有办法在CellRenderer中生成这个spinner组件？
(the ag-grid是动态构建的，因此我无法设置div的“innerHtml”，因为它不在.component.html文件中，这是许多在线解决方案建议的）。
谢谢

typescript

来源：https://stackoverflow.com/questions/74446951/angular-ag-grid-cellrenderer-renders-html-string-as-is

1条答案

按热度按时间

41zrol4v1#

请您给予更多有关您的旋转器的信息。
另外，我有一个非常简单的旋转工作在这里（不是很好的风格！），请你能调整这个plunker来演示你的问题？
https://plnkr.co/edit/9DnJw74J8x51DDRz?open=app%2Fapp.component.ts
plunker创建一个新的单元格渲染器组件：

@Component({
  selector: 'medal-component',
  template: `{{ this.displayValue }}<div class="loader"></div>`,
})
export class SpinnerCellRenderer implements ICellRendererAngularComp {
  public displayValue!: string;

  agInit(params: ICellRendererParams<IOlympicData, number>): void {
    console.log(params)
    this.displayValue = params.value;
  }
}

带有一些造型：

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  display: table-cell
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

这是如何使用它：

{ field: 'athlete', minWidth: 200, cellRenderer: SpinnerCellRenderer },

赞(0）回复(0）举报 2022-11-18

我来回答

typescript 角形ag-grid CellRenderer按原样呈现HTML字符串

1条答案

相关问题

热门标签

最新问答