ngModel的非常简单的用法 [英] Very Simple usage of ngModel

问题描述

我有一个非常简单的表主体，它基于 activityDays 生成一个表，并为每个 clientType 创建带有一些输入的列.

I have this very simple table body that generates a table based on the activityDays and for each clientType creates columns with some inputs.

效果很好.

<tr *ngFor="let c of counter(environment.activityDays); let day = index" class="text-center hover-table" [(ngModel)]="clients">
  <td>{{day+1}}</td>
  <td *ngFor="let clientType of clientTypes">
    <div>
      <input class='text-center field' value='0' type='number' min='0' required />
    </div>
  </td>
</tr>

我现在的问题是如何从这些输入中检索数据?我想要例如

My problem now is how do I retrieve the data from this inputs? I want for example

ClientType1 , Day 1 , 20 clients

ClientType2 , Day 1 , 10 clients

等...

我上了一堂课，但我不知道如何应用.

I made a class but I don't know how to apply this.

export class Client {
  day:number;
  type:string;
  amount:number;
}

然后，当我提交表单时，我现在只想在日志上显示对象.

And then when I submit my form i just want to show the objects on the log for now.

 clients:Client[];

 create() {
  console.log(this.clients);
 }

推荐答案

您可以执行以下操作:

Component.ts:

Component.ts:

export class Component  {
  clientTypes = ['','','',''];
  clientTypesInputs = [];
}

Component.html:

Component.html:

<table>
    <tr>
        <td *ngFor="let clientType of clientTypes; let in=index">
      <div>
        <input value="0" type="number" min="0" required [(ngModel)]="clientTypesInputs[in]"  />
      </div>
    </td>
    </tr>
</table>

<ul>
  <li *ngFor="let clientTypeInput of clientTypesInputs">{{clientTypeInput}}</li>
</ul>

clientTypesInputs将在需要根据clientTypes数组位置进行索引的位置输入.

clientTypesInputs is going to have the inputs at the index that they need to be acording to clientTypes array position.

这是一个可行的示例:

https://stackblitz.com/edit/angular-artq8x

这篇关于ngModel的非常简单的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！