与 Angular (4.0.0) 和材料 2.0.0-beta.8 的数据绑定

Question

I'm new to Typescript and overall WebDev. Currently, I want to use md-select to bind data to a form that is submitted to a backend, but my current implementation breaks the page. The HTML looks as follows.

<md-input-container class="home__input-container">
 <md-select placeholder="sex | male/female" [(ngModel)]="patient.gender" name="gender">
 <md-option *ngFor="let gender of genders" [value]="gender">
  {{gender}}
 </md-option>
 </md-select>
 </md-input-container>

I am importing most possible modules (MdSelect, Forms, etc.) as shared.modules file in appcomponent. The select is used in one of the other components. Here I define the genders string.

public genders: string[] = ["male","female"];

Here is the object I want to bind data to.

export class Patient {
dose: number = 20;
mass: number = 30;
gender: string = "male";
age: number = 10;}

Any suggestions on what's wrong?

Answer 1

There is nothing wrong on your HTML:

<md-input-container class="home__input-container">
  <md-select placeholder="sex | male/female" [(ngModel)]="patient.gender" name="gender">
  <md-option *ngFor="let gender of genders" [value]="gender">
    {{gender}}
  </md-option>
  </md-select>
</md-input-container>

On your component.ts, you should be using an object, instead of a class for patient. However, you may use an interface (Patient) to define the typings for your patient object.

interface Patient {
  dose: number;
  mass: number;
  gender: string;
  age: number;
}

And within your class itself,

genders: string[] = ["male","female"];

patient: Patient = {
  dose: 20,
  mass: 30,
  gender: 'male',
  age: 10,
}