为什么要在 ng-select2 下拉列表中添加额外的按钮标签

如何解决为什么要在 ng-select2 下拉列表中添加额外的按钮标签

我正在尝试在 ng-Select2 下拉列表中添加按钮 a。

我需要在他们的 templateResult 属性中添加 html，并定义列表的显示方式。

如果我添加 <span> 或 <div>，它工作正常。但是，如果我添加 <button> 那么它会添加一个额外的按钮标签。如何删除这个额外的按钮？

html

<ng-select2
   class="form-item select2"
   name="clientGroup"
   placeholder="select client group"
   [(ngModel)]="client.clientGroupID"
   #clientGroup="ngModel"
   [options]="optionsClientGroup"
   [data]="clientGroups"
   required>
</ng-select2>

component.ts

ngOnInit(): void {
    this.getClientGroups();
    this.optionsClientGroup = {
      templateResult: this.templateResult,};
}

getClientGroups() {
    this.subs = this.clientService.getClientGroups().subscribe((res) => {
      res.responseModel.forEach((clientGroup) => {
        this.clientGroups.push({
          id: clientGroup['id'],text: clientGroup['clientGroupName'],});
      });
      this.clientGroups.push({
        id: '1233',text: 'button',additional: { html: '<button >Add New Client Group<button>' },});
    });
}

public clientTemplateResult = (state: any): JQuery | string => {
    if (state.additional && state.additional.html)
      return jQuery(state.additional.html);
    else {
      jQuery(state.text);
    }
};

这是我在下拉菜单中得到的： [结果图像][1]

这是我检查页面时得到的：

<li class="select2-results__option select2-results__option--selectable select2-results__option--highlighted" id="select2-uazh-result-fe1t-1233" role="option" data-select2-id="select2-data-select2-uazh-result-fe1t-1233" aria-selected="true">
<button>Add New Client Group</button>
<button></button>
</li>