从自定义自动完成单元格编辑器获取输入值

Question

我正在尝试使用 ag 网格制作自定义自动完成组件。我无法使用下拉列表中的选定值更新返回值

换句话说：

我输入 'A' => 我得到一个项目列表 => 我选择一个 => 输入用项目值更新 => 保存 => 我得到 'A'

单元格编辑器选择器：

    cellEditorSelector: (params) => {
      const values = this.articles.map((item) => {
        return {
          text: item.code,
          value: item.id,
        };
      });
      return {
        component: 'autoComplete',
        params: {
          values,
        },
      };
    },

自定义组件：

  selector: 's1-ag-grid-auto-complete',
  template: `<div class="flex flex-col gap-1">
    <div class="relative">
      <input
        #input
        class="w-full text-xs rounded-md border-gray-300 shadow-sm pr-6"
        matInput
        (input)="onInputChange($event)"
        (change)="onChange($event)"
        [matAutocomplete]="auto"
        [value]="value"
        s1AutocompleteForceSelection
        type="text"
      />
    </div>
    <mat-autocomplete autoActiveFirstOption="true" #auto="matAutocomplete">
      <mat-divider></mat-divider>
      <mat-option *ngFor="let option of filteredList" [value]="option.value">
        <ng-container>
          <ng-container></ng-container>
        </ng-container>
        <span [title]="option.text" class="text-xs break-words">{{ option.text }} </span>
      </mat-option>
    </mat-autocomplete>
  </div>`,
})
export class AgGridAutoCompleteComponent implements ICellEditorAngularComp {
  public value: any;
  public filteredList;
  public options;
  private params: any;

  public agInit(params: any): void {
    this.params = params;
    this.value = params.value;
    this.options = params.values;
  }

  public onInputChange(event: Event): void {
    const inputValue = (event.target as HTMLInputElement).value;
    if (inputValue != null && inputValue != '') {
      const inputValueLowerCase = inputValue.toLowerCase();
      this.filteredList = (this.options || []).filter((element) => {
        return element.text.toLowerCase().includes(inputValueLowerCase);
      });
    } else {
      this.filteredList = [];
    }
  }

  public onChange($event) {
    this.value = $event.target.value;
  }

  public getValue(): any {
    return this.value;
  }
}

有什么想法吗？

Answer 1

你可以这样做：

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="input.value = $event.option.value">

从自定义自动完成单元格编辑器获取输入值

Getting input value from custom autocomplete cell editor

angular

typescript

angular-material

ag-grid

ag-grid-angular