Question

Angular2 \ ES6：我正在尝试构建一个包含一组过滤器的页面（模型），这些过滤器应该从服务（异步）获取数据 - 每个过滤器调用一次。该模型包含2个主要类：报告和 ReportFilter 。报告可以包含多个 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;
    }
}

这是reportFilter：

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（结果）; 应该 this.activeReportFilter.parseData（结果[0]）;

使用angular2

1 个答案: