ng-select双向绑定问题：多选下拉选框选中项同步异常

Hey there! Let's work through this ng-select multi-select problem step by step—since you're new to Angular, I'll keep things clear and actionable.

1. Fix the Two-Way Binding Foundation #

The first issue is likely missing the right setup for ng-select's two-way binding with your selected items array. Here's how to get that working:

Component Code

First, define your item list and selected items array in your component class. Make sure the selected array is initialized as an empty array (not null or undefined—this is a common pitfall for beginners):

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // Your full list of dropdown options
  allDropdownItems = [
    { id: 1, label: 'Option 1' },
    { id: 2, label: 'Option 2' },
    { id: 3, label: 'Option 3' },
    { id: 4, label: 'Option 4' }
  ];

  // Array to hold selected items (initialized empty!)
  selectedItems: any[] = [];
}

Template Setup

Bind this array to ng-select using [(ngModel)], and enable multi-select mode. Don't forget to define how ng-select should display and track your items:

<ng-select
  [items]="allDropdownItems"
  [(ngModel)]="selectedItems"
  [multiple]="true"
  bindLabel="label" <!-- Which property of your item to display -->
  bindValue="id"    <!-- Which property to use as the value (optional but recommended) -->
  placeholder="Select options..."
>
</ng-select>

Also, double-check that you've imported NgSelectModule and FormsModule in your Angular module (since ngModel requires FormsModule):

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ... other modules like BrowserModule
    FormsModule,
    NgSelectModule
  ]
})
export class YourModule { }

2. Add Selected Item Buttons with Close Icons #

Now that the binding is working, we can render the selected items as clickable buttons with close icons below the dropdown. Use *ngFor to loop through your selectedItems array:

Template Code

<!-- Container for selected item buttons -->
<div class="selected-items mt-3">
  <button 
    *ngFor="let item of selectedItems; let i = index"
    class="btn btn-outline-primary me-2 mb-2"
  >
    {{ item.label }}
    <!-- Close icon that triggers remove on click -->
    <span 
      class="ms-2 close-icon"
      (click)="removeSelectedItem(i)"
    >×</span>
  </button>
</div>

Component Delete Method

Add a method to remove items from the array—since we're using two-way binding, modifying this array will automatically update the ng-select component:

removeSelectedItem(index: number) {
  // Remove the item at the given index from the selected array
  this.selectedItems.splice(index, 1);
}

3. Handle Deletion from Both Sides #

• From ng-select: The ng-select component already handles this out of the box in multi-select mode—when you select items, they appear at the top of the dropdown with their own close icons. Clicking those will automatically remove the item from your selectedItems array (thanks to two-way binding).
• From your custom buttons: The removeSelectedItem method we wrote will update the array, which in turn tells ng-select to deselect that item.

4. Optional: Style the Close Icon #

Make the close icon look and behave like a clickable element with some simple CSS:

.close-icon {
  cursor: pointer;
  font-weight: bold;
  color: #dc3545;
}

.close-icon:hover {
  color: #c82333;
}

That's it! With this setup, your selected items will sync perfectly between the ng-select dropdown and your custom button list, and you can delete items from either side.

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