Angular 加载带有角度路由的ng2双列表框所选项目

我是Angular 4的新手，已经花了几个小时试图解决这个问题，所以非常感谢您的帮助

我在我的项目中使用了ng2双列表框组件，在从api中的selected items listbox侧动态加载大型选定项数组时遇到问题。不知何故，控件似乎是在加载选定项中的项之前呈现的。例如，当应用程序自行运行时，“选定项”列表为空，但当我在调试模式下运行并中断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##
从“@angular/core”导入{Injectable}；
从'@angular/Http'导入{Http，Headers，RequestOptions，Response}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
导入“rxjs/add/observable/throw”；
导入“rxjs/add/observable/of”；
从“rxjs/Observable”导入{Observable}；
...
@可注射（）
构造函数（私有http:http）{}
getUser（）：可观察{
返回此文件。http
.get（this.baseUrl+“用户”）
.map（response=>response.json（））
.接住（这个.把手错误）；
}
##CourseService.ts##
//与用户服务相同
getCourses（）：可观察{
返回此文件。http
.get（this.baseUrl+“课程”）
.map（response=>response.json（））
.接住（这个.把手错误）；
}

---

##user-detail.resolver.ts##
从“@angular/core”导入{Component，OnInit，Injectable}；
从'@angular/Router'导入{Resolve，Router，ActivatedRouteSnapshot}；
从'rxjs/Rx'导入{Observable}；
从“../\u services/user.service”导入{UserService}；
...
@可注射（）
导出类UserDetailResolver实现解析{
构造函数（私有用户服务：用户服务，
专用路由器：路由器{}
解析（路由：ActivatedRouteSnapshot）：可观察{
返回此.userService.getUser（route.params['id']）
.捕获（错误…）；
this.router.navigate（['/userList']）；
可观测的返回值（空）；
});
}
}
##user.Component.html##

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

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

}))；

---

}

在我的情况下，它不起作用。请帮助我这是我在ngModel This中传递的数组。stations=[{id:1，name:'Antonito'}，{id:2，name:'Big Horn'}，{id:3，name:'Sublette'}，]；

## 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>

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