在Angular 5

Question

我试图创建一个看起来像excel表的html表。用户可以单击添加新条目按钮向表格添加新行，其中<td>显示每input个<tr *ngFor="let row of getRowCount()"> <td><input type="text" name="date" class="form-control" /></td> <td><input type="number" name="start_time" class="form-control" /></td> <td><input type="number" name="finish_time" class="form-control" /></td> <td width="150px"> <select name="users" class="form-control"> <!-- this will be from db --> <option value="" selected>Alex</option> <option value="">John</option> </select> </td> <td><input type="number" name="duration" class="form-control" /></td> </tr>。它看起来像this。

这就是我正在做的事情：

＆＃13;

＆＃13;

import {
  Component,
  Renderer2,
  ViewChild,
  ElementRef
} from '@angular/core';
import {
  NavController
} from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('thegrid') gridElement: ElementRef;

  dragTarget: any = null;
  grid: any;
  items: Array < any > ;
  placeholder = {
    index: 11,
    style: {
      background: "black"
    },
    class: {
      gridItem: true, dragged: false
    }
  }

  constructor(
    public navCtrl: NavController,
    public renderer: Renderer2
  ) {

    this.items = [{
        index: 0
      },
      {
        index: 1
      },
      {
        index: 2
      },
      {
        index: 3
      },
      {
        index: 4
      },
      {
        index: 5
      },
      {
        index: 6
      },
      {
        index: 7
      },
      {
        index: 8
      },
      {
        index: 9
      },
      {
        index: 10
      }
    ]

  }
}

＆＃13;

＆＃13;

＆＃13;

我想在用户点击完成后将所有这些输入数据发送回父组件。但是，我很难理解，如何解析这些动态创建的输入。一个想法是创建一个对象数组，每个对象将包含name，start_time等字段。

但是，如何从这些输入中获取此数据。任何建议都会有所帮助。