Question

我有这个非常简单的表体，它基于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

等...

我上了课，但我不知道如何申请。

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

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

 clients:Client[];

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

Answer 1

你可以这样做：

Component.ts：

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

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数组位置的输入。

这是一个有效的例子：

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

非常简单的使用ngModel

1 个答案: