列表格式化程序多次调用

Question

我有一个列表格式化程序（autocompleListFormatter），在启动下拉菜单时会多次调用它。

上图显示了仅启动一次下拉菜单后控制台的输出。

dropdown.component.html

<form [formGroup]="myForm" class="">
  <div class="form-style">
    <input
      autofocus
      [list-formatter]="autocompleListFormatter"
      type="text"
      class="form-control"
      formControlName="gridDropdown"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      [(ngModel)]="value"
    />
  </div>
</form>

dropdown.component.ts

export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;
  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}

// ****DROPDOWN****** //
  autocompleListFormatter = (data: any) => {
    console.log('autocompleListFormatter..............');
    let html = `<span>${data.name}</span>`;
    return this._sanitizer.bypassSecurityTrustHtml(html);
  };

  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;
  }

  ngOnInit() {
    this.myForm = this.builder.group({
      gridDropdown: ''
    });
  }
}

column-data.ts

export let ColumnData = [
  {
    editable: true,
    cellEditor: 'editComp',
    cellEditorParams: {
      values: [
        { id: 1, name: '200001 - General Management' },
        { id: 2, name: '200002 - Management' },
        { id: 3, name: '200003 - DataCenter' },
        { id: 4, name: '200009 - Location Hamburg' },
        { id: 5, name: '200010 - General Management' },
        { id: 6, name: '200011 - Management' },
        { id: 7, name: '200012 - DataCenter' },
        { id: 8, name: '2000213 - Location Hamburg' }
      ]
    }
  }
];

有什么办法可以避免这种情况？我应该使用特定的生命周期挂钩还是其他东西？

Answer 1

根据ColumnData的values数组中存在的项目数，每次都会调用过滤器以创建用于降低该时间数的跨度。

您可以看到在Chrome中结合了8个日志记录