html - 在角度的嵌套 ngfor 循环中使用 ngmodel 并在 ngModel 中获取动态值
问题描述
我正在尝试使用 angular 创建以下屏幕。但问题是我无法使用 ngModel 绑定值。
以下是我尝试过的实现。提前致谢。
这是我用来绑定值的模型实体 - patientModule.ts
export class PatientTestDetails {
public testDate?: string;
public specimenType?: string;
public testPrinciple?: string;
public remark?: string;
public hemoglobin?: any;
public wbcCount?: any;
public rbcCount?: any;
public meanPlateletVolume?: any;
public plateletsCount?: any;
public packedCellVolume?: any;
public meanCorpuscularVolume?: any;
public meanCorpuscularHb?: any;
public meanCorpuscularHbConc?: any;
public rbcDistributionWidth?: any;
public createdDate?: any;
public modifiedDate?: any;
public neutrophilsCount?: any;
public absoluteNeutrophilsCount?: any;
public eosinophilsCount?: any;
public absoluteEosinophilsCount?: any;
public absoluteBasophilsCount?: any;
public lymphocytesCount?: any;
public absoluteLymphocytesCount?: any;
public monocytesCount?: any;
public absoluteMonocytesCount?: any;
public basophilsCount?: any
constructor(
testDate?: string,
remark?: string,
hemoglobin?: any,
wbcCount?: any,
rbcCount?: any,
meanPlateletVolume?: any,
plateletsCount?: any,
packedCellVolume?: any,
meanCorpuscularVolume?: any,
meanCorpuscularHb?: any,
meanCorpuscularHbConc?: any,
rbcDistributionWidth?: any,
neutrophilsCount?: any,
absoluteNeutrophilsCount?: any,
eosinophilsCount?: any,
absoluteEosinophilsCount?: any,
absoluteBasophilsCount?: any,
lymphocytesCount?: any,
absoluteLymphocytesCount?: any,
monocytesCount?: any,
absoluteMonocytesCount?: any,
basophilsCount?: any
) {
this.testDate = testDate;
this.specimenType = 'swab';
this.testPrinciple = 'RTPCR';
this.remark = remark;
this.hemoglobin = hemoglobin;
this.wbcCount = wbcCount;
this.rbcCount = rbcCount;
this.meanPlateletVolume = meanPlateletVolume;
this.plateletsCount = plateletsCount;
this.packedCellVolume = packedCellVolume;
this.meanCorpuscularVolume = meanCorpuscularVolume;
this.meanCorpuscularHb = meanCorpuscularHb;
this.meanCorpuscularHbConc = meanCorpuscularHbConc;
this.rbcDistributionWidth = rbcDistributionWidth;
this.neutrophilsCount = neutrophilsCount;
this.absoluteNeutrophilsCount = absoluteNeutrophilsCount;
this.eosinophilsCount = eosinophilsCount;
this.absoluteEosinophilsCount = absoluteEosinophilsCount;
this.basophilsCount = basophilsCount;
this.absoluteBasophilsCount = absoluteBasophilsCount;
this.lymphocytesCount = lymphocytesCount;
this.absoluteLymphocytesCount = absoluteLymphocytesCount;
this.monocytesCount = monocytesCount;
this.absoluteMonocytesCount = absoluteMonocytesCount;
this.createdDate = new Date().toISOString();
this.modifiedDate = new Date().toISOString();
}
}
下面是我的组件文件 patientComponent.ts 已经全局声明了以下数组
testDetails = new PatientTestDetails(); // PatientTestDetails is the model specified above
test: any = [];
ngOnInit(): void {
for (let index = 0; index < 6 - 1; index++) { //iterated by 6 as I need 6 columns
this.test.push(this.testDetails);
}
}
下面是我的模板文件。如图所示,用于生成上述输入的表格。
<table>
<tr>
<td *ngFor="let detail of test; let i = index">
<tr *ngFor="let item of detail | keyvalue">
<span *ngIf="i === 0;">{{item.key}}</span>
<td>
<input type="text" class="form-control" id="dayWiseData"
name="day1" [(ngModel)]="item.value" />
</td>
</tr>
</td>
</tr>
</table>
写这个 ngModel 我无法绑定用户输入值。请建议我绑定值的正确方法。谢谢你。
解决方案
使用您的代码,我能够通过:
<td *ngFor="let detail of test; let i = index">
<tr *ngFor="let item of detail | keyvalue; let u = index">
<span *ngIf="i === 0;">{{item.key}}</span>
<td>
<input type="text" class="form-control" id="dayWiseData"
name="day1" [(ngModel)]="test[i][u]" />
</td>
具有 2 路绑定的 ngModel 必须能够引用范围内的实际值。一旦嵌套在数组中,就不能将它绑定到内部嵌套引用。而是(在这种情况下)引用主数据源和该值的路径。我在这里使用数据数组的数字索引,但它很容易成为对象引用[(ngModel)]="test[patient.id][medtest.id]"
推荐阅读
- html - 元标记'没有属性“类”'和'没有属性“属性”'和其他属性错误
- php - 如何为可能有孩子的JSON数组的所有孩子动态重复(PHP)
- android - 当在android中单击线性布局时,单选按钮将选择
- php - Laravel 项目的链接在 Wamp 服务器中不起作用
- laravel-6 - 当 Laravel 6 中的 DB 为空时,视图中出现 CRUD 错误
- firebase - 如何在“本地托管”网络应用上使用 Firebase 身份验证
- php - 如何将成功的 AJAX 响应附加到 Codeigniter 中的下拉值?
- kdb - 在 KDB 中,我们可以对 .z.ph 和 .z.pp 使用延迟响应吗?
- node.js - 减少 Javascript 中的调用堆栈大小
- android - 在数据片段之间传递数据