Considering the data structure, it is needed to add a key for the array in selectedValue.
valuesList = [
{
name: 'foo',
items: [
{ id: 1, title: 'title001', message: 'msg001', value: 'value001'},
{ id: 2, title: 'title002', message: 'msg002', value: 'value002'},
{ id: 3, title: 'title003', message: 'msg003', value: 'value003'},
]
},
{
name: 'bar',
items: [
{ id: 4, title: 'title004', message: 'msg004', value: 'value004'},
{ id: 5, title: 'title005', message: 'msg005', value: 'value005'},
{ id: 6, title: 'title006', message: 'msg006', value: 'value006'},
]
}
];
selectedValue = this.valuesList[0];
Moreover, I don’t recommend to use ons-select with [ngValue] because it supports only string currently.
<select class="select-input" [(ngModel)]="selectedValue">
<option *ngFor="let value of valuesList" [ngValue]="value">
{{ value.name }}
</option>
</select>
<ons-list>
<ons-list-item *ngFor="let item of selectedValue.items">
<h2>{{item.title}}</h2>
<p>{{item.message}}{{item.value}}</p>
</ons-list-item>
</ons-list>
Here’s a live demo.
https://stackblitz.com/edit/ngx-onsenui-topic-3319
Cheers,
puku0x
