md select doesn't show value binded

Question

In my project I have an md-select,but i don't understand why it seems not be binded, I see the placeholder and not the value binded. this is the select:

<md-select placeholder="Areas" name="area" required [(ngModel)]="selected.area">
<md-option *ngFor="let area of areas"[value]="area.value"> 
{{ area.label }} </md-option> </md-select>

selected.area is a string for example 'area1'

areas:

areas: SelectItem[];

loadAreas(): void {
this.hotelService.getAreas()
.subscribe(response => {
for (const key in response._embedded.areas) {
if (response._embedded.areas.hasOwnProperty(key)) {
this.areas.push({
label: response._embedded.areas[key].name,
value: response._embedded.areas[key]._links.self.href

In the areas array I can see the correctly areas when I click in the select

• area1
• area2

and SelectItem:

export interface SelectItem {
     label: string;
     value: any;
}


loadArea(url): void {  this.hotelService.getSelfArea(url) .subscribe(response => {   this.selected.area = response.name;