Angular Ag Grid 明文输入问题

Question

您好，我正在使用带有 Angular 5 的 Ag Grid 企业版 17.0。文本字段似乎有问题。我无法清除文本字段中的值。根据附件与文本字段关联的十字符号不会在单击它时清除文本。你能告诉我如何使用十字符号使这个明文字段工作吗？请找到附件供您参考。

列定义

{
        headerName: 'Contact Name',
        formEditable: true,
        isRequired: true,
        width: 150,
        minWidth: 150,
        suppressPaste: false,
        field: 'contactName',
        suppressFilter: true,

}

Answer 1

感谢@Paritosh 提供的 plunkr，我设法创建了一个演示。按照 Ag-grid 的约定，您应该使用 frameworkComponents 和 ICellEditorAngularComp 创建自定义组件。

您可以在此处查看完整演示，并参考名为“数字”的列：https://plnkr.co/edit/QWPNv9IBvaBuv8yAdWYg?p=preview

一旦您开始演示，请参考app/numeric-editor.component.ts。

基本上，我在输入端添加了一个“十字”按钮，并将click 事件绑定附加到该按钮：

<div class="search_field">
    <input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">
    <button type="button" (click)="clear()"style="position: absolute;top: 3px;right: 10px;">
      <span>&times;</span>
    </button>
</div>

这就是我定义clear() 方法的方式。想法是将其设置为未定义（或空字符串），并分别返回该值。

clear() {
  this.value = null;
  console.log(this.value);
  return this.value;
}

样式可能并不完美，但我希望你能明白我的想法