Onsen + Angular with "ons-select" on change

DCost

Hi everyone, i’m new with OnsenUI and have a very poor experience with angular in general.
I’m trying to develop a select-option template that catches data from my server and populate a list based on selected option value. Here it is my code:

<ons-select id="selectValue" [(ngModel)]="selectedValue" [attr.item]="selectedValue">
   <option *ngFor="let item of valuesList" [value]="item">
         {{ item.name }}
   </option>
</ons-select>

I would like to put data that are inside “selectedValue” model into an “ons-list”:

...
<ons-list-item style="padding-left: 0px" *ngFor="let item of selectedValue">
   <h2>{{item.title}}</h2>
   <p>{{item.message}}{{item.value}}</p>
</ons-list-item>
...

If you need more information to give me help, ask here… i will edit this message with new information. Hope everything is clear and that someone can help me.

puku0x

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