时间戳

首页 > 解决方案 > ngModel 的非常简单的用法

javascript - ngModel 的非常简单的用法

问题描述

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

它运作良好。

<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>

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

ClientType1 , Day 1 , 20 clients

ClientType2 , Day 1 , 10 clients

ETC...

我做了一个类，但我不知道如何应用它。

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

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

 clients:Client[];

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

标签： javascriptangular

解决方案

你可以这样做：

组件.ts：

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

组件.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 数组位置的索引处有输入。

这是一个工作示例：

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

推荐阅读