I have a simple goal that I am working on:
I want to display data obtained from a service in my component.
This is how it used to work:
In my component:
...
dataSet: String[];
ngOnInit(){
this._service.getDataId().then(data => this.dataSet = data);
}
...
In my service:
...
getDataId(){
return this.http.get(adress).toPromise()
.then(response => response.json() as String[])
.catch(this.handleError);
} // Return a Promise<String[]>
...
In the view:
...
<ul>
<li *ngFor="let data of dataset">
{{ data['id'] }}
</li>
</ul>
...
However, I recently made changes to the service function to fetch more data.
Since then, I encountered an ExpressionChangedAfterItHasBeenCheckedError.
Here are the modifications in the service method:
...
getMoreData() {
const result: Map<string, String[]> = new Map();
return this.http.get(this.address).toPromise()
.then((response) => {
return Promise.all(Array.from(response.json())
.map(id => {
return this.http.get(this.address + '/' + id').toPromise()
.then((rep) => {
result.set(domain['@href'], rep.json() as String[]);
}).catch(this.handleError)
})
);
})
.then(() => result)
.catch(this.handleError);
} // Return a Promise<Map<string, String[]>>
...
Even though the data is displayed correctly, an error is being raised.
I've tried implementing some workarounds (setTimeout, ChangeDetectorRef) but I'm unsure why it was working previously and not now since both functions return a Promise<Stuff>.
I also understand that I need to initialize my attribute like this in the component to prevent null errors during view loading:
this.moreData: Map<string, String[]> = new Map();
This initialization might also be causing the issue, but what should I do differently?
---
Project specifications
Angular 4.2.2
Typescript 2.3.4