Question

我是Angular 4的新手，已经花了几个小时试图弄清楚如何解决这个问题，所以非常感谢任何帮助。

我在项目中使用了ng2-dual-list-box组件，我在选择项列表框中从api动态加载大量选定项时遇到问题。不知何故，似乎在加载所选项目中的项目之前呈现控件。例如，当应用程序单独运行时，所选项目列表为空，但是当我在调试模式下运行并在loadCourses函数上中断并等待10-20秒再恢复之前，所选项目控件将填充所选项目。我这样做了吗？有解决方法吗？

以下是我的代码：

## user.component.ts ##
import { Component, OnInit } from '@angular/core';
import { UserService } from '../../_services/UserService.service';
import { CourseService } from '../../_services/CourseService.service';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class MyUserComponent implements OnInit {

  availableCourses: Course[];

  constructor(private userService: UserService, 
      private courseService: CourseService,
          private route: ActivatedRoute) {

  }

ngOnInit() {
    this.route.data.subscribe(data => this.user = data['user'] );
    this.loadCourses();

    //Selected list items do not load at all without this line  
    //this line also seems to return data after the component has loaded. Selected items in the components.html is empty
    this.loadUserDetails();     
}

loadCourses(){
 this.courseService.getCourses()
        .subscribe(courses => this.availableCourses = courses);
}

loadUserDetails(){
    this.userService
        .getUser(this.route.snapshot.params['id'])
        .subscribe(user => this.user = user)
}

## UserService.ts ##
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/of';
import { Observable } from 'rxjs/Observable';
...


@Injectable()

constructor(private http: Http) { }
getUser(): Observable<User> {
     return this.http
                .get(this.baseUrl + 'user')
                .map( response => <user>response.json())
                .catch(this.handleError);
}

## CourseService.ts ##
//same as userService
getCourses(): Observable<Course[]> {
    return this.http
                .get(this.baseUrl + 'courses')
                .map( response => <Courses[]>response.json())
                .catch(this.handleError);    
}

## user-detail.resolver.ts##
import { Component, OnInit, Injectable } from '@angular/core';
import { Resolve, Router, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { UserService } from '../_services/user.service';
...


@Injectable()
export class UserDetailResolver implements Resolve<User> {

  constructor(private userService: UserService,
              private router: Router) { }

resolve(route: ActivatedRouteSnapshot): Observable<User> {
  return this.userService.getUser(route.params['id'])
                            .catch(error ....);
                             this.router.navigate(['/userList']);
                              return Observable.of(null);
                            });
  }

}

## user.Component.html ##
 <form  role="form" #editForm="ngForm" name="editForm"   (ngSubmit)="SaveUser()">
  <ng2-dual-list-box [data]="availableCourses" 
        valueField="id" textField="name" #courseList name="courseList"
       (onAvailableItemSelected)="log($event)" 
        [(ngModel)]="user.Courses"
       (onSelectedItemsSelected)="log($event)"
       (onItemsMoved)="log($event)" ng-disabled="true">
   </ng2-dual-list-box>
</form>

Answer 1

事实证明，我不是分别调用this.loadCourses（）和this.loadUserDetails（），而是需要从组件中this.loadCourses的订阅中调用this.loadUserDetails（）。

loadCourses(){
 this.courseService.getCourses()
                   .subscribe((courses) => {
                         this.availableCourses = courses;
                         //If this.available courses
                         this.loadUserDetails();

}）; }

使用角度路径加载ng2-dual-list-box所选项目

1 个答案: