Angular4中通过路由加载ng2-dual-list-box选中项的问题求助

Hey there! I totally get how frustrating it is to spend hours stuck on a component issue when you're still getting up to speed with Angular 4—let's break this down together.

The core problem here is that the ng2-dual-list-box is rendering before your API-fetched selected items are ready, so it doesn't pick up the data once it loads. Here are some practical fixes you can try:

1. Delay component rendering until data is ready #

The simplest way to ensure the component only sees fully loaded data is to use *ngIf to hold off rendering until your selected items are available. This prevents the component from initializing with empty data.

In your template:

<ng2-dual-list-box 
  *ngIf="isSelectedDataLoaded"
  [items]="availableItems"
  [(selectedItems)]="selectedItems"
  <!-- Add your other component config here -->
></ng2-dual-list-box>

In your component TypeScript:

isSelectedDataLoaded = false;
selectedItems: any[] = [];

ngOnInit() {
  this.yourApiService.fetchSelectedItems().subscribe(
    (apiData) => {
      this.selectedItems = apiData;
      this.isSelectedDataLoaded = true; // Trigger component render now that data is ready
    },
    (error) => {
      console.error('Failed to load selected items:', error);
      this.isSelectedDataLoaded = true; // Still render the component to avoid a blank screen
    }
  );
}

2. Manually trigger change detection #

If delaying rendering isn't ideal (e.g., you need the component to show up immediately with a loading state), you can force Angular to update the view once your data loads using ChangeDetectorRef.

First, import it in your component:

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

Then inject and use it:

constructor(private cdr: ChangeDetectorRef) {}

ngOnInit() {
  this.yourApiService.fetchSelectedItems().subscribe(
    (apiData) => {
      this.selectedItems = apiData;
      this.cdr.detectChanges(); // Tell Angular to refresh the view with new data
    }
  );
}

3. Ensure available items load first (if needed) #

Some versions of ng2-dual-list-box require the full list of available items to be present before it can match and display selected items. If you're loading available items from an API too, use forkJoin to load both datasets in parallel and initialize the component once both are ready:

import { forkJoin } from 'rxjs';

availableItems: any[] = [];
selectedItems: any[] = [];
isAllDataLoaded = false;

ngOnInit() {
  forkJoin([
    this.yourApiService.fetchAvailableItems(),
    this.yourApiService.fetchSelectedItems()
  ]).subscribe(
    ([availableData, selectedData]) => {
      this.availableItems = availableData;
      this.selectedItems = selectedData;
      this.isAllDataLoaded = true;
    },
    (error) => {
      console.error('Failed to load data:', error);
      this.isAllDataLoaded = true;
    }
  );
}

4. Verify your data structure matches the component's requirements #

Double-check that the data returned from your API matches the format the ng2-dual-list-box expects. For example, the component might require each item to have an id and label field. If your API returns different keys, transform the data before assigning it:

this.yourApiService.fetchSelectedItems().subscribe(
  (rawApiData) => {
    // Transform data to match component's expected structure
    this.selectedItems = rawApiData.map(item => ({
      id: item.item_id,
      label: item.item_name
    }));
    this.isSelectedDataLoaded = true;
  }
);

Start with the *ngIf approach first—it's the most straightforward way to guarantee the component only initializes with complete data. If you hit specific errors or can share more details about your API response structure, we can dig deeper!

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