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

Question

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

换言之：

我输入'A‘=>，我得到一个条目列表，我选择一个=>，输入被更新为项目值=>，保存=>，我得到'A’

cellEditorSelector：

    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">