Как я могу добавить запись, когда пользователь нажимает кнопку Добавить запись?

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, у вас будет тот же контент в ваших переменных. Узнайте больше о двусторонней привязке данных в угловых здесь или здесь .

Добавьте в вашу addRec() функцию для каждой переменной что-то вроде этого: console.log(this.yourVariableName)

и, нажав на кнопку, вы увидите значение полей input в консоли разработчика вашего браузера.

Если вы хотите создать что-то вроде формульной формы, прочтите документацию по angulur.io здесь .