Iterating over keys instead of objects in AngularJS 2

I have a use case in AngularJS 2 where I have an object with an attribute that is an array of keys, like this:

export class Region {
m49: string;
parent: string;
regions: string[];
countries: string[];
name: string;
}


I have a service that takes a key, and returns the corresponding object:

@Injectable()
export class PlaceService {
getRegion(m49: string) {
...
}
getCountry(iso: string) {
...
}
}


I'm trying to build a component that displays the information about a region, and then lists the sub-regions and countries. This displays the region and country keys properly.

@Component({
selector: 'places',
template: `
<div>
<h2>{{region.name}}</h2>
<div>
<h3>Regions</h3>
<ul>
<li *ngFor="let m49 of region.regions">{{m49}}</li>
</ul>
</div>
<div>
<h3>Countries</h3>
<ul>
<li *ngFor="let iso of region.countries">{{iso}}</li>
</ul>
</div>
</div>
`,
providers: [ PlaceService ]
})


But what I'd really like to do is to get the region and country objects in the loops, and display their properties. How do I invoke a method of the component class to call the service, and retrieve an object, from the <li> elements? Secondarily, how can I use *ngIf on the two child div elements to only include them if the respective lists are non-empty?

Continue reading...