Angular TypeScript带全选功能的动态矩阵实现及数据保存问询

Hey there! Let's break down how to implement the select-all functionality and data saving for your Angular step-interest matrix. I'll cover both template updates and component logic you need to make this work smoothly.

First, you'll need to track selection states for every step-interest pair, plus the global "select all" state. In your component class, define these variables to manage the state:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-step-interest-matrix',
  templateUrl: './step-interest-matrix.component.html'
})
export class StepInterestMatrixComponent {
  // Replace these with your actual data sources
  interestList: any[] = []; 
  stepList: any[] = [];

  // Global select all state
  isAllSelected = false;
  // Stores selection state: { stepId: { aoiId: boolean } }
  stepInterests: { [stepId: string]: { [aoiId: string]: boolean } } = {};

  constructor(private http: HttpClient) {
    // Initialize state when component loads
    this.initializeSelectionState();
  }

  initializeSelectionState(): void {
    this.stepList.forEach(step => {
      this.stepInterests[step.id] = {};
      this.interestList.forEach(aoi => {
        // Start with all checkboxes unchecked
        this.stepInterests[step.id][aoi.id] = false;
      });
    });
  }
}

We'll handle two levels of select-all: global (select everything in the matrix) and per-step (select all interests for a single step).

Global Select-All #

Update your header row's checkbox to bind to the global state and trigger a change handler:

<table class="k-grid">
  <tr class="k-alt">
    <td>Step</td>
    <td style="text-align:center">
      <input type="checkbox" [(ngModel)]="isAllSelected" (change)="onGlobalSelectAll()" />
    </td>
    <td *ngFor="let aoi of interestList" style="text-align:center">{{ aoi.description }}</td>
  </tr>
  <!-- Step rows will go here -->
</table>

Add this method to your component to toggle all checkboxes when the global select-all is clicked:

onGlobalSelectAll(): void {
  this.stepList.forEach(step => {
    this.interestList.forEach(aoi => {
      this.stepInterests[step.id][aoi.id] = this.isAllSelected;
    });
  });
}

Per-Step Select-All #

Add a per-step select-all checkbox to each row, and bind it to toggle all interests for that step:

<tr *ngFor="let step of stepList" class="k-alt">
  <td>{{ step.name }}</td>
  <td style="text-align:center">
    <input type="checkbox" 
           [checked]="isStepFullySelected(step.id)" 
           (change)="onStepSelectAll(step.id)" />
  </td>
  <td *ngFor="let aoi of interestList" style="text-align:center">
    <input type="checkbox" 
           [(ngModel)]="stepInterests[step.id][aoi.id]" 
           (change)="updateGlobalSelectState()" />
  </td>
</tr>

Add these helper methods to sync the per-step and global states:

// Check if all interests for a step are selected
isStepFullySelected(stepId: string): boolean {
  return this.interestList.every(aoi => this.stepInterests[stepId][aoi.id]);
}

// Toggle all interests for a single step
onStepSelectAll(stepId: string): void {
  const isStepSelected = this.isStepFullySelected(stepId);
  this.interestList.forEach(aoi => {
    this.stepInterests[stepId][aoi.id] = !isStepSelected;
  });
  this.updateGlobalSelectState();
}

// Update global select-all state when any single checkbox changes
updateGlobalSelectState(): void {
  this.isAllSelected = this.stepList.every(step => 
    this.interestList.every(aoi => this.stepInterests[step.id][aoi.id])
  );
}

You have two common options for saving the matrix data: sending it to a backend API or storing it client-side.

Save to Backend (HTTP POST) #

Use Angular's HttpClient to send the selection state to your server:

saveToBackend(): void {
  this.http.post('/api/step-interests', this.stepInterests)
    .subscribe({
      next: (response) => {
        console.log('Data saved successfully!', response);
        // Add success notifications here if needed
      },
      error: (err) => {
        console.error('Failed to save data', err);
        // Add error handling here
      }
    });
}

Client-Side Save (LocalStorage) #

For temporary persistence without a backend, use localStorage:

saveToLocalStorage(): void {
  localStorage.setItem('stepInterestMatrix', JSON.stringify(this.stepInterests));
  console.log('Data saved to local storage');
}

Add a button to trigger the save action in your template:

<button (click)="saveToBackend()">Save to Server</button>
<button (click)="saveToLocalStorage()">Save Locally</button>

• Don't forget to import FormsModule in your Angular module to use [(ngModel)] for two-way data binding.
• Import HttpClientModule if you're using the backend save option.
• Populate interestList and stepList with your actual dynamic data (from an API call, static config, etc.).

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