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()方法的方式。想法是将其设置为undefined（或空字符串），然后分别返回该值。

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

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