Javascript 使用角度（4.0.0）和材料2.0.0-beta.8进行数据绑定

我不熟悉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>

这是我要将数据绑定到的对象

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

---

有什么不对的建议吗？

您的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>

在你的班级里

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

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

---

我试过这个，但它没有解决我的问题，它仍然会破坏页面。这可能是因为我在使用md卡或angular flex时遇到了问题吗？@GeorgiIvanov-Hmm。。我可以知道调试器/控制台上显示了哪些错误吗？此外，我可以知道您使用的angular和material的版本吗？错误：“表单控件的无值访问器，名称为：'SEXT'”&错误：“md input容器必须包含mdInput指令。您是否忘记将mdInput添加到本机输入或textarea元素？”标题说明了版本（Angular 4.0.0，Material 2.0.0-beta.8）。@GeorgiIvanov-hmm.您使用的是反应式表单吗？这看起来像是反应式表单本身的错误。请尝试删除

formControlName

属性！如果您不打算使用它，则不应该有任何这些问题已解决！md input container在此版本中不能与md select一起使用：）问题已解决，md输入容器不适用于材料2.0.0-beta中的md select。8:）

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

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

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