Angular 4项目：TypeScript实现多选框选中项跨列表复制的方法求助

Hey there! Since you're already comfortable with vanilla JavaScript, let's translate that logic into clean, idiomatic Angular + TypeScript code. We'll leverage Angular's data binding system (instead of manual DOM manipulation) for the simplest, most maintainable implementation, plus add the final API submission step.

Step 1: Update the Template (student.component.html) #

We'll add template reference variables to access the dropdowns, bind the final list to a data array, and add buttons to trigger copy/submit actions:

<h5>Final student list</h5>
<div class="col-xs-6">
  <!-- Bind final list to our component's data array -->
  <select 
    #finalList 
    multiple 
    class="form-control" 
    name="multiselect1"
  >
    <option *ngFor="let student of finalStudents" [value]="student.Id">{{ student.Name }}</option>
  </select>
  <br>
  <button class="btn btn-primary" (click)="submitFinalList()">Submit to API</button>
</div>

<h5>Students</h5>
<div class="col-xs-6">
  <!-- Add template ref to access selected items easily -->
  <select 
    #studentList 
    multiple 
    class="form-control" 
    name="multiselect2"
  >
    <option *ngFor="let student of students" [value]="student.Id">{{ student.Name }}</option>
  </select>
  <br>
  <button class="btn btn-secondary" (click)="copySelectedStudents(studentList)">Copy Selected to Final List</button>
</div>

Step 2: Update the Component Class (student.component.ts) #

We'll add a finalStudents array to track the final list, implement the copy logic (with duplicate prevention), and add the API submission method:

import { Component } from '@angular/core';
import { StudentService } from './student.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html'
})
export class StudentComponent {
  students: any[] = [];
  finalStudents: any[] = []; // Stores our final selected students

  constructor(private studentService: StudentService) {}

  onGetStudents() {
    this.studentService.getStudents()
      .subscribe(
        (students: any[]) => this.students = students,
        (error) => console.error('Failed to load students:', error)
      );
  }

  // Copy selected students from the second dropdown to the final list
  copySelectedStudents(studentSelect: HTMLSelectElement) {
    // Convert selected options to an array and map to matching student objects
    const selectedOptions = Array.from(studentSelect.selectedOptions);
    const selectedStudents = selectedOptions
      .map(opt => this.students.find(student => student.Id === opt.value))
      .filter(Boolean); // Remove any undefined entries (just in case)

    // Prevent duplicates by filtering out students already in the final list
    const uniqueNewStudents = selectedStudents.filter(
      newStudent => !this.finalStudents.some(existing => existing.Id === newStudent.Id)
    );

    // Add the unique students to our final list
    this.finalStudents.push(...uniqueNewStudents);
  }

  // Submit the final list to your WebAPI
  submitFinalList() {
    // Adjust this to match your API's expected format (Id array or full objects)
    const finalStudentIds = this.finalStudents.map(student => student.Id);

    this.studentService.submitFinalStudents(finalStudentIds)
      .subscribe(
        (response) => console.log('List submitted successfully:', response),
        (error) => console.error('Failed to submit list:', error)
      );
  }
}

Step 3: Extend the Service (student.service.ts) #

Add a method to submit the final list, and update the existing getStudents method to use Angular's modern HttpClient (recommended for Angular 4.3+):

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  constructor(private http: HttpClient) {}

  getStudents(): Observable<any[]> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
    });

    return this.http.get<any[]>(`${environment.baseUrl}/api/Queues`, { headers })
      .pipe(
        catchError(error => {
          console.error('Error fetching students:', error);
          return throwError(() => error);
        })
      );
  }

  // New method to submit the final student list
  submitFinalStudents(studentIds: number[]): Observable<any> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
    });

    // Replace the endpoint with your actual API URL
    return this.http.post(`${environment.baseUrl}/api/StudentList`, studentIds, { headers })
      .pipe(
        catchError(error => {
          console.error('Error submitting list:', error);
          return throwError(() => error);
        })
      );
  }
}

Key Notes #

• Data Binding Over DOM Manipulation: Angular's reactive approach means we don't need to manually add/remove options—updating the finalStudents array automatically updates the dropdown.
• Duplicate Prevention: The copy logic filters out students already in the final list to avoid redundant entries.
• API Compatibility: Adjust the submission payload (Id array vs full objects) to match what your WebAPI expects.

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