Unable to bind data in angular 2 using angular material

时间:2018-01-11 08:46:58

标签: angular angular-material

I am trying to create a simple select box using the angular material in angular 2 application. For that, I have created an array of floors in my component.ts file also created the one string selectedValue for binding data. Now, I am trying to pick data from the select box and print it in next paragraph tag for checking binding.

Here is my .ts file code:

export class SpaceadminComponent implements OnInit {

  selectedValue: String;
    floors = [
    {value: 'floor1', viewValue: 'Floor 1'},
    {value: 'floor2', viewValue: 'Floor 2'},
    {value: 'floor3', viewValue: 'Floor 3'}
  ];

This is my html file:

<mat-form-field>
  <mat-select placeholder="Floor" [(ngModel)]="selectedValue" name="floor" >
    <mat-option *ngFor="let floor of floors" [value]="floor.value">
      {{ floor.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>
<h2>Selected Item:{{selectedValue}}</h2>

Please correct my confusion regarding data binding.

0 个答案:

没有答案