首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在angular中使用嵌套的ngfor循环中的ngmodel,并在ngModel中获取动态值

在angular中使用嵌套的ngfor循环中的ngmodel,并在ngModel中获取动态值
EN

Stack Overflow用户
提问于 2021-05-09 10:20:07
回答 1查看 268关注 0票数 1

我正在尝试使用angular创建以下屏幕。但问题是我无法使用ngModel绑定值。

下面是我尝试过的实现。提前谢谢。

这是我用来绑定值的模型实体- patientModule.ts

代码语言:javascript
运行
复制
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,它全局声明了以下数组

代码语言:javascript
运行
复制
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);
 }
}

下面是我的模板文件。用于生成上述输入的表格,如图所示。

代码语言:javascript
运行
复制
<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我不能绑定用户输入值。请建议我绑定这些值的正确方法。谢谢你。

EN

回答 1

Stack Overflow用户

发布于 2021-05-09 12:07:28

使用你的代码,我能够让它通过:

代码语言:javascript
运行
复制
<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>

具有双向绑定的ngModel必须能够引用作用域中的实际值。一旦在数组中嵌套,就不能将其绑定到内部嵌套引用。而是(在本例中)引用主数据源和该值的路径。我在这里使用的是数据数组的数字索引,但它很容易成为对象引用[(ngModel)]="test[patient.id][medtest.id]"

How to use 2d array on ngmodel in angular 2?

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67453753

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档