I'm initializing my MDB Select instance with a default value, however it is not being selected. I've reviewed the code in the answer to this question, however the specified default still is not working for me.

The select has no selection even though the ngModel value has the expected value and that default value exists in the options list. I've also tried setting the "selected" property on the options and confirmed that it is being correctly set on the desired item, to no avail.

I've included some sample code below to reproduce the problem. Any help would be appreciated.

Thanks!

<list-test.component.html>

<div class="row">
  <divclass="col-sm-6">
    <mdb-select
      name="selectTest"
      [(ngModel)]="selectedOption"
      [options]="optionsSelect">
    </mdb-select>
  </div>
</div>

<list-test.component.ts>

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ListTestDataService } from './list-test-data.service';
@Component({
  selector:'app-list-test',
  templateUrl:'./list-test.component.html',
  styleUrls: ['./list-test.component.scss']
})
export class ListTestComponent implements OnInit {
  optionsSelect:Array<any>;
  selectedOption:number;

constructor(private listTestDataService:ListTestDataService) { }

  ngOnInit() {
    this.selectedOption=1;
    this.loadLists();
  }

  loadLists():void {
    this.listTestDataService.getData().subscribe((item:any) => {
      item=item.json();
      this.optionsSelect= [
        { value: item[0].id, label: item[0].name, selected: item[0].id === this.selectedOption },
        { value: item[1].id, label: item[1].name, selected: item[1].id === this.selectedOption },
        { value: item[2].id, label: item[2].name, selected: item[2].id === this.selectedOption },
      ]
    });
  }
}

<list-test-data.service.ts>

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable({
  providedIn:'root'
})
export class ListTestDataService {
  url:string='https://jsonplaceholder.typicode.com/users';
  constructor(privatehttp:Http) { }
  getData() {
    returnthis.http.get(this.url);
  }
}