Angular中移除选中项时复选框未取消勾选的问题

Got it, let's fix this checkbox sync issue. The core problem here is that your checkboxes aren't tied to the state of selectedTermsArray—you're manually updating the array when checkboxes are clicked, but when you remove an item from the array via removeField, there's no mechanism to update the checkbox's checked state. Here's how to fix it step by step:

1. Fix Checkbox Binding & HTML Structure #

First, update your checkbox HTML to tie its checked state directly to whether the term exists in selectedTermsArray. Also, fix the duplicate id attribute (all checkboxes had id="checkbox1" which is invalid HTML):

<span class="suggestermsSpan">Suggested terms</span> <br>
<div *ngFor="let list of TermsArray">
  <input 
    name="checkboxName" 
    class="checkmark" 
    [id]="'checkbox-' + list.Name" <!-- Unique ID for each checkbox -->
    type="checkbox" 
    [value]="list.Name"
    [checked]="selectedTermsArray.includes(list.Name)" <!-- Sync checked state with array -->
    (change)="onCheckboxSelected(list.Name, $event.target.checked)">
  {{list.Name}}
</div>

2. Simplify the Checkbox Selection Logic #

Update your TypeScript onCheckboxSelected method to work with the term directly (instead of relying on event.target), making the code cleaner and less dependent on DOM elements:

selectedTermsArray: string[] = [];

onCheckboxSelected(term: string, isChecked: boolean) {
  if (isChecked) {
    // Only add the term if it's not already in the array
    if (!this.selectedTermsArray.includes(term)) {
      this.selectedTermsArray.push(term);
    }
  } else {
    const index = this.selectedTermsArray.indexOf(term);
    if (index !== -1) {
      this.selectedTermsArray.splice(index, 1);
    }
  }
}

removeField(index: number) {
  // Just remove the item from the array—Angular will handle updating the checkboxes
  this.selectedTermsArray.splice(index, 1);
}

3. Update Selected Terms Display (Optional) #

If you haven't already, add a remove button/icon to your selected terms display for better UX:

<div>
  <div *ngFor="let selectedValue of selectedTermsArray; let i = index">
    <span>{{selectedValue}}</span>
    <button (click)="removeField(i)" style="margin-left: 8px; cursor: pointer;" aria-label="Remove term">×</button>
  </div>
</div>

Why This Works #

• Two-way State Sync: By using [checked]="selectedTermsArray.includes(list.Name)", the checkbox's checked state is always derived from the array. When you remove an item via removeField, Angular's change detection will automatically update the checkbox to be unchecked.
• Cleaner Event Handling: Passing the term directly to onCheckboxSelected avoids messy DOM manipulations and makes the code easier to test.
• Valid HTML: Unique IDs for each checkbox fix accessibility and DOM selection issues.

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