Связывание данных с Angular (4.0.0) и Material 2.0.0-beta.8

Question

Я новичок в Typescript и в целом WebDev.В настоящее время я хочу использовать md-select, чтобы связать данные с формой, отправляемой бэкэнду, но моя текущая реализация ломает страницу.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>

Я импортирую большинство возможных модулей (MdSelect, Forms и т. Д.) В виде файла shared.modules в appcomponent.Выбор используется в одном из других компонентов.Здесь я определяю строку genders.

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

Вот объект, к которому я хочу привязать данные.

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

Есть предложения, что не так?

Answer 1

В вашем 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>

В ваших component.ts вы должны использовать объект, а не класс для пациента.Однако вы можете использовать интерфейс (Patient) для определения типов для вашего patient объекта.

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

И в самом вашем классе,

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

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