Suppose you have an array of objects stored in a service
export class DataService {
private _dataSources : Array<DataSource>
contructor(private callerService: CallerService){
this._dataSources = this.callerService.getDataSources(); // fetching data from another service
}
// getter for _dataSources
get dataSources(): Array<Datasource> {
return this._dataSources;
}
}
I would like to utilize the array of dataSources within a for loop in a component referred to as "DataComponent"
@Component({
selector: 'data-component',
template: `
<div *ngFor="let dataSource of dataService.dataSources"></div> // one way
<div *ngFor="let dataSource of dataSources"></div> // other way
`,
styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
public dataSources: Array<DataSource>
constructor(public dataService: DataService) { }
ngOnInit() {
this.dataSources = this.dataService.dataSources();
}
So the real question is, what is the optimal method for implementing the for loop, taking into account:
- dataSources can potentially contain a large amount of data from multiple sources (similar to an Excel workbook)
- Code must be easily comprehensible to others
Are there any performance advantages, and what is the standard practice in Angular?
I am aware that
this.dataSources = this.dataService.dataSources();