当用户单击“添加记录”按钮时如何添加记录

Question

// This is my Component.ts
// How can i add a new row for this table with new Values.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-uom',
  templateUrl: './uom.component.html',
  styleUrls: ['./uom.component.css']
})

export class UomComponent implements OnInit {
  itemIdVal: '';
  itemDescVal = '';
  itemClassval = '';
  itemSubClassVal = '';
  show: boolean;
  constructor() { }
  ngOnInit() {
  }
addRec() {
 // alert(this.itemIdVal + '|| ' + this.itemDescVal + '|| ' + this.itemClassval + '|| ' + this.itemSubClassVal);
}
}

<!--This is my Component.html -->
<table style="width:100%;"> 
 <thead>
 <tr>
 <td><input type="text" placeholder="Please Enter Item ID" [(ngModel)] = "itemIdVal"/></td>
 <td><input type="text" placeholder="Please Enter Item Description" [(ngModel)]="itemDescVal"/></td>
 <td><input type="text" placeholder=" Please Enter Classification" [(ngModel)]="itemClassval"/></td>
 <td><input type="text" placeholder="Please Enter Sub-Class" [(ngModel)]="itemSubClassVal"/></td>
 </tr>
 <tr height="25">
 <th width="25%">Item ID</th>
 <th width="25%">Item Description</th>
 <th width="25%">Item Classification</th>
 <th>Item Sub-Classification <span class="buttons"><a  (click)="addRec()"><span>Add Record</span></a></span></th>
 </tr>
	<tr>
	<td>{{itemIdVal}}</td>
	<td>{{itemDescVal}}</td>
	<td>{{itemClassval}}</td>
	<td>{{itemSubClassVal}}</td>
	</tr>	 
</thead>
 <tbody>
 </tbody>
 </table>

Answer 1

对于您在uom.component.ts中定义的四个变量，您添加了四个input字段[(ngModel)]。使用[(ngModel)]，您可以为变量添加双向数据绑定。这意味着，如果在input字段中添加一些内容，则变量中将具有相同的内容。了解有关以角度here或here进行双向数据绑定的更多信息。

将每个变量添加到addRec()函数中，如下所示：console.log(this.yourVariableName)

并通过单击按钮，您将在浏览器的开发人员控制台中看到input字段的值。

如果您想构建类似公式的内容，请阅读angulur.io here上的文档。