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

Posted 2023-03-13

【中文标题】与 Angular (4.0.0) 和 Material 2.0.0-beta.8 的数据绑定

【英文标题】：Data binding with Angular (4.0.0) and Material 2.0.0-beta.8

【发布时间】：2020-01-27 01:28:05

【问题描述】：

我是 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 等）导入为 appcomponent 中的 shared.modules 文件。选择用于其他组件之一。 这里我定义了性别字符串。

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

这是我要绑定数据的对象。

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

有什么建议吗？

【问题讨论】：

问题已解决，md-input-container 不适用于 Material 2.0.0-beta.8 中的 md-select :)

【参考方案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,

【讨论】：

我已经尝试过了，但它并没有解决我的问题，它仍然打破了页面。这可能是我使用 md-card 或 angular-flex 的问题吗？跨度>

@GeorgiIvanov 嗯.. 我可以知道调试器/控制台上显示了哪些错误吗？另外，请问您使用的是什么版本的角度和材料

ERROR 错误：“名称为'gender'的表单控件没有值访问器”和错误错误：“md-input-container 必须包含 mdInput 指令。您是否忘记将 mdInput 添加到本机输入或文本区域元素？”标题讲述了版本（Angular 4.0.0，Material 2.0.0-beta.8）。

@GeorgiIvanov 嗯..你在使用反应形式吗？这看起来像是反应形式本身的错误。尝试删除formControlName 属性！如果您不打算使用它，则不应该有任何这些

问题解决了！ md-input-container 在此版本中不适用于 md-select :)