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