I am attempting to create a dropdown list of "data" depending on the selected "id". The data is retrieved from a JSON response obtained through an HTTP request. Here is the structure:
[
{ "id": 1, "data":[1,2,3,4] },
{ "id": 2, "data":[5,6,7] }
]
The HTML code snippet is as follows:
<ion-item>
<ion-label>City</ion-label>
<ion-select >
<ion-option *ngFor="let item of receivedData">{{item.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Fraction</ion-label>
<ion-select>
<ion-option [?????] </ion-option>
</ion-select>
</ion-item>
The TypeScript (.ts) section is outlined below:
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [PostService]
})
export class HomePage {
receivedData: Information[];
constructor(public navCtrl: NavController, private service: PostService) {
this.service.getData('mc').subscribe(data =>
this.receivedData = data);
}
}
interface Information {
id: string;
data: string[];
}
My aim is to populate a dropdown list based on the selection of "id" in a previous selection. I have attempted using *ngFor but I am having trouble implementing it. As a newcomer to Angular2 and TypeScript, any guidance on how to achieve this would be greatly appreciated.
Thank you!