Angular ng-select无匹配项时如何添加“创建新项”选项？

可以通过动态维护选项数组+自定义模板的方式实现需求，具体步骤如下：

1. 组件类逻辑处理 #

在组件.ts文件中，维护原始选项列表、动态渲染的选项列表，同时监听搜索事件判断是否有匹配项：

import { Component } from '@angular/core';

interface Item {
  id: number;
  name: string;
  isNew?: boolean; // 标记是否为“创建新项”条目
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  originalItems: Item[] = [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
    { id: 3, name: 'Option 3' },
  ];
  items: Item[] = [...this.originalItems];
  selectedItem: Item | null = null;
  searchTerm = '';

  onSearch(event: string) {
    this.searchTerm = event.trim();
    // 过滤原始选项
    const filteredItems = this.originalItems.filter(item => 
      item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
    // 无匹配项时，添加“创建新项”条目
    if (filteredItems.length === 0 && this.searchTerm) {
      this.items = [{
        id: 0,
        name: `创建新项: ${this.searchTerm}`,
        isNew: true
      }];
    } else {
      this.items = filteredItems;
    }
  }

  createNewItem(item: Item) {
    if (item.isNew && this.searchTerm) {
      // 这里执行创建新项的逻辑，比如调用接口、添加到原始列表
      const newItem: Item = {
        id: Date.now(),
        name: this.searchTerm
      };
      this.originalItems.push(newItem);
      this.selectedItem = newItem;
      // 重置选项列表
      this.items = [...this.originalItems];
      this.searchTerm = '';
    }
  }
}

2. 模板自定义渲染 #

在组件.html文件中，使用ng-template自定义选项模板，区分普通选项和“创建新项”条目，并绑定点击事件：

<ng-select 
  [(ngModel)]="selectedItem"
  [items]="items"
  (search)="onSearch($event)"
  placeholder="搜索选项..."
  bindLabel="name"
>
  <ng-template ng-option-tmp let-item="item">
    <!-- 普通选项样式 -->
    <div *ngIf="!item.isNew">{{ item.name }}</div>
    <!-- 创建新项样式，添加点击事件 -->
    <div *ngIf="item.isNew" style="color: #007bff; cursor: pointer;" (click)="createNewItem(item)">
      🎯 {{ item.name }}
    </div>
  </ng-template>
</ng-select>

关键说明 #

• 通过(search)事件实时获取用户输入的关键词，动态过滤并更新选项列表
• 给“创建新项”条目添加isNew标识，用于模板中区分渲染逻辑
• 点击“创建新项”时，执行自定义的创建逻辑（比如添加到原始列表、调用后端接口等），完成后重置选项和搜索状态

内容的提问来源于stack exchange，提问作者GowriShankar