从td获取值,以Angular输入

时间:2017-10-11 07:49:10

标签: angular angular-services angular-forms

我很难从td和输入中获取表内的值。我试图点击按钮并提醒它,但它未定义。我如何从这些领域获得价值?字段是材料,单位和数量

  

HTML

Set FSO = CreateObject("Scripting.FileSystemObject")
directory = path
If(FSO.FolderExists(directory) Then
Else FSO.CreateFolder directory
  

TS

<tr *ngFor="let addRow of row; let rowIndex = index">
  <td>
    <select type="text" class="form-control" ngModel required #material>
      <option *ngFor="let material of materials" [value]="material.id">{{ material.name }}</option>
    </select>
  </td>
  <td><input type="text" class="col-md-10" placeholder="pcs, pack, bag etc..." #unit></td>
  <td><input type="number" class="col-md-6" #quantity></td>
  <td>10</td>
  <td>
    <button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(rowIndex)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button>
  </td>
</tr>
<button class = "btn btn-primary float-right" (click)="onCreate(material,unit,quantity)"><i class="fa fa-floppy-o" aria-hidden="true"></i>  Save</button>

1 个答案:

答案 0 :(得分:0)

以下是您想要解决问题的代码示例。

注意:小心javascript对象引用。

//在html中

    <tr *ngFor="let addRow of row; let rowIndex = index">
  <td>
    <select type="text" class="form-control"  required #material= 'ngModel' [(ngModel)]="data[rowIndex].material">
      <option *ngFor="let material of materials" [value]="material.id">{{ material.name }}</option>
    </select>
  </td>
  <td><input type="text" class="col-md-10" placeholder="pcs, pack, bag etc..." #unit= 'ngModel'  [(ngModel)]="data[rowIndex].unit"></td>
  <td><input type="number" class="col-md-6" #quantity= 'ngModel' [(ngModel)]="data[rowIndex].quantity"></td>
  <td>10</td>
  <td>
    <button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(rowIndex)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button>
  </td>
  <button class = "btn btn-primary float-right" (click)="onCreate(rowIndex)"><i class="fa fa-floppy-o" aria-hidden="true"></i>  Save</button>
</tr>

//在ts

data:any = [
            {"material":"", "unit":"", "quantity":""}
            ......
            ];

onCreate(rowIndex){
    alert(data[rowIndex]);
  }