In my service, I have the following methods:
getMap(): any {
return this.http.get(`someURL`);
}
getAssets(): any {
return this.http.get(`someURL`);
}
Within my Component, these methods are utilized in the following manner:
ngOnInit() {
this.myService.getMap().subscribe(data => {
this.map = data; // Returns ["map-1.svg", "map-0.svg"]
});
this.systemMapService.getAssets().subscribe(data => {
this.assets = data; // Returns ["map-mapping-0.json", "map-mapping-1.json"]
});
}
In my template, I aim to use them as follows:
<mat-tab-group mat-align-tabs="end">
<div *ngFor="let item of assets; let i = index">
<mat-tab label="{{i}}">
<div class="container">
<div class="map">
<img id="img_equipment" [src]="apiUrl + '/path/to/svg/' + item">
<a *ngFor="let link of map"
title="{{ link.title }}"
class="ink"
[ngStyle]="{ left: link.left, top: link.top, width: link.width }">
</a>
</div>
</div>
</mat-tab>
</div>
</mat-tab-group>
The return values of the calls are provided as comments in the code.
For instance, the file map-0.svg should correspond to the JSON file map-mapping-0.json. Similarly, map-1.svg should match with map-mapping-1.json.
Do the arrays returned by the calls need to be sorted for this to function correctly? As currently, they are unordered when received from the backend.