Angular Ag Grid 明文输入问题

Question

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

列定义

{
        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.

创建自定义组件

您可以在此处查看完整演示，并参考名为 'Numeric' 的专栏：https://plnkr.co/edit/QWPNv9IBvaBuv8yAdWYg?p=preview

进入演示后，请参阅 app/numeric-editor.component.ts。

基本上，我在输入上添加了一个 'cross' 按钮，并为该按钮附加了一个 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() 方法的方式。这个想法是将其设置为未定义（或空字符串），并分别 return 该值。

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

样式可能并不完美，但希望您能理解我的想法

Angular Ag Grid 明文输入问题

Angular Ag Grid Clear Text Input Issue

ag-grid

angular