在 angular2 中使用异步服务（观察者）

Question

Angular2\ES6: 我正在尝试构建一个页面（模型），其中包含一组过滤器，这些过滤器应该从服务（异步）获取数据 - 每个过滤器调用一次。 该模型包含 2 个主要类：Report 和 ReportFilter。 Report 可以包含多个 reportFilters（过滤器：ReportFilter[] = [];），并且每个 reposrtFilter 都由服务填充。 我已经尝试使用 observbles 进行所有异步操作，但最终结果是过滤器中仍然没有数据（服务可靠并返回数据），在构造主 Report 类实例时（这应该是起点） . 任何支持将不胜感激！ 查看我的代码： 这是报告类：

export class CadasterReport
{
    filters : CadasterReportFilter[] = [];
    filtersIDs : number[] = [];
    activeReportFilter : CadasterReportFilter = null;
    constructor(  private filterService : FilterService,  private id : number )
    {
        this.filtersIDs =  this.getFiltersByReport();
        this.populateFilters().forEach(observable => 
        {
            observable.subscribe(result => this.concatData(result));
        });

    } 

    addToFilters(id : number, filters : CadasterReportFilter[]) : Observable<any>
    {
         this.activeReportFilter = 
         new CadasterReportFilter(this.filterService, id);

         return this.activeReportFilter.InitData();
    }

    concatData( result : any)
    {
        this.activeReportFilter.parseData(result[0]);
        this.filters.concat(this.activeReportFilter);//Here I except to see
        //that the this.activeReportFilter is already populated with the 
        //filter's data - it isn't
    }
    getFiltersByReport() : number[]
    {
        let filtersNumbers : number [] = null;
        switch (this.id.toString())
        {
            case ("10"):
                filtersNumbers = [10,20,30];
                break;
            case ("20"):
                filtersNumbers = [20,30,10];
                break;
            default:
               filtersNumbers = [30,10,20];
               break;
        }
        return filtersNumbers;
    }

    populateFilters() : Observable<any>[]
    {
        var filterObservablesCollection : Observable<any>[] = [];

       this.filtersIDs.forEach(filterID => 
       {
            filterObservablesCollection.push(this.addToFilters(filterID, 
             this.filters));
        });
        return filterObservablesCollection;
    }
}

这是报告过滤器：

export class ReportFilter
{
    private filterValues : string[] = [];
    private selectedValue : string = null;
    get ID() : number
    {
        return this.id;
    }
    set ID(value : number)
    {
        this.id = value;
    }
    private name : string = null;
    get Name() : string
    {
        return this.name;
    }
    set Name(value : string)
    {
        this.name = value;
    }
    public constructor(private filterService : FilterService,  private id : number ){}

    public InitData() : Observable<any>
    {
        return this.initFilter();
    }
    private initFilter() : Observable<any>
    {
        this.filterService.FilterID = this.ID;
        return this.filterService.GetFilterValues();
    }

    public parseData(result : any)
    {
        this.name = result.Name;
        this.filterValues = result.values;
    }

}

这是我从组件中的初始调用：

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

  private reportID : number;
  constructor(private activatedRoute: ActivatedRoute,   private filterService : FilterService) { }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(( params: ParamMap) => this.initReport(params));
  }

  initReport(params : ParamMap): any 
  {
    this.reportID = params['id'];
    var Report : Report = new Report(this.filterService, this.reportID); 
  }
}

Answer 1

除了将结果作为数组而不是对象接收的 parseData 函数之外，一切都很顺利。 我修复了代码： this.activeReportFilter.parseData(result); 应该 this.activeReportFilter.parseData(result[0]);