如何取消勾选mat-checkbox中最后一个已勾选的选项？

Got it, let's fix this. You want to programmatically uncheck the last checked item in your list of mat-checkboxes. Here's how to adjust your existing code to make that work smoothly:

Step 1: Add a Method to Find & Uncheck the Last Checked Item #

In your component class, add this method to locate the last checked entry and toggle its checked state to false:

uncheckLastChecked(): void {
  // Extract the checked statuses and find the last index of a checked item
  const lastCheckedIdx = this.data.map(item => item.checked).lastIndexOf(true);
  
  if (lastCheckedIdx !== -1) {
    // Update the checked state of the last checked item
    this.data[lastCheckedIdx].checked = false;
    // Update your lastAction log to reflect the change
    this.lastAction = `Unchecked last item: index ${lastCheckedIdx}, label: ${this.data[lastCheckedIdx].label}, checked: false`;
    console.log(`Unchecked item at index ${lastCheckedIdx}:`, this.data[lastCheckedIdx]);
  } else {
    console.log("No checked items found to uncheck.");
  }
}

Step 2: Trigger the Method (Optional) #

If you want to trigger this action with a button (or any other event), add this to your template:

<button mat-button (click)="uncheckLastChecked()">Uncheck Last Checked Item</button>

<!-- Your existing checkbox list -->
<div *ngFor="let item of data; let i = index;">
  <mat-checkbox [checked]="item.checked" (change)="onChange($event, i, item)">
    {{item.label}}
  </mat-checkbox>
</div>

Step 3: (Optional) Ensure Change Detection #

If you notice the checkbox doesn't update immediately (rare with object references), you can force change detection by reassigning the data array (this ensures Angular picks up the change):

uncheckLastChecked(): void {
  const lastCheckedIdx = this.data.map(item => item.checked).lastIndexOf(true);
  
  if (lastCheckedIdx !== -1) {
    // Create a new array with the updated item to trigger change detection
    this.data = this.data.map((item, idx) => 
      idx === lastCheckedIdx ? {...item, checked: false} : item
    );
    this.lastAction = `Unchecked last item: index ${lastCheckedIdx}, label: ${this.data[lastCheckedIdx].label}, checked: false`;
  }
}

How It Works #

• this.data.map(item => item.checked) converts your data array into an array of boolean values representing each item's checked status.
• lastIndexOf(true) finds the last occurrence of true in that boolean array, which corresponds to the last checked item in your original data list.
• We then toggle that item's checked state to false and update your log to reflect the action.

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