javascript - 与 Angular (4.0.0) 和 Material 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>
我将大多数可能的模块(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;}
关于有什么问题的任何建议?
解决方案
您的 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,
}
推荐阅读
- python - TypeError:'float' 对象在 openpyxl 函数 dataframe_to_rows 中不可下标
- c++ - 如何确保只有 1 个线程在运行?C++
- spring - spring boot @async with completablefuture 用于多线程
- azure-iot-sdk - 如何处理通过 DPS(组对称密钥)从网关设备调配到 IoT Central 的多个设备客户端
- eclipse-plugin - 如何在 Eclipse 中更改 ESP32 中的 SPI Flash 大小?
- java - 调用受 TLS 保护的 Rest 端点
- macos - 将 Team Explorer 添加到 Visual Studio 2019 for mac
- c++ - 如何在不受系统时间变化影响的情况下测量经过时间
- qt - 需要有关导入 QML 的帮助
- vue.js - @nuxtjs/axios 的 CORS 错误,但 fetch() 或 vue axios 没有