如何在表格中创建动态行javascript angular 2

Question

我正在根据下拉选择创建表格。我能够显示单个选择的数据。我想创建一个“新建按钮”的功能，它将添加一行，选定的值将显示在新生成的行中。我怎样才能达到这个使用javascript或角2。 P.S.I我只是一个初学者。提前致谢。

Screenshot

import { NgModule }  from '@angular/core'; 
 
import { Component, OnInit } from '@angular/core'; 
 
import {SelectItem} from 'primeng/primeng'; 
 
import { FormsModule } from '@angular/forms'; 
 
import {ButtonModule} from 'primeng/primeng'; 
 
import {DataTableModule,SharedModule} from 'primeng/primeng'; 
 

 
@Component({ 
 
    selector: 'app-test', 
 
    templateUrl: 'app/test/test.component.html', 
 
    styleUrls: ['app/test/test.component.css'] 
 
}) 
 
export class TestComponent implements OnInit { 
 

 
makes: SelectItem[]; 
 
selectedMake: string; 
 

 
motors: SelectItem[]; 
 
selectedMotorType: string; 
 

 
poles: SelectItem[]; 
 
selectedPole: string; 
 

 
} 
 

 
constructor() { 
 

 
    this.makes = []; 
 
    this.makes.push({label:'Select makes', value:null}); 
 
    this.makes.push({label:'Siemens', value:{id:1, name: 'Siemens', code: 'Siemens'}}); 
 
    this.makes.push({label:'ABS', value:{id:2, name: 'ABS', code: 'ABS'}}); 
 

 
    this.motors = []; 
 
    this.motors.push({label:'Select Motor Type', value:null}); 
 
    this.motors.push({label:'IE1', value:{id:11, name: 'IE1', code: 'IE1'}}); 
 
    this.motors.push({label:'IE2', value:{id:12, name: 'IE2', code: 'IE2'}}); 
 
    this.motors.push({label:'IE3', value:{id:13, name: 'IE3', code: 'IE3'}}); 
 

 
    this.poles = []; 
 
    this.poles.push({label:'Select Pole Type', value:null}); 
 
    this.poles.push({label:'2 Pole', value:{id:21, name: '2Pole', code: '2Pole'}}); 
 
    this.poles.push({label:'4 Pole', value:{id:22, name: '4Pole', code: '4Pole'}}); 
 
    this.poles.push({label:'6 Pole', value:{id:23, name: '6Pole', code: '6Pole'}}); 
 
} 
 

 

 
//code for button click new row generate 
 
    rows = [{name: ''}]; 
 
    name = "new"; 
 
    addRow() { 
 
    this.rows.push({name: this.name}); 
 
    } 
 
//================= 
 

 
    private textValue = "initial value"; 
 
     private log: string ='result'; 
 
     private kw: string = 'kw'; 
 
     private frame: number = 0; 
 

 
DisplayResult(){ 
 
    if(this.selectedMake.name=='ABS' && this.selectedMotorType.name=='IE1'){ 
 
    alert(this.selectedMake.name); 
 
    this.log = 'IABVC5Z' '\n' 
 
    this.kw = 'new' '\n' 
 
    }}

<div class="container row"> 
 
    <div class="col-sm-6"> 
 
    <p class="col-sm-3" >Makes :</p> 
 
    <p-dropdown class="col-sm-4" [options]="makes" [(ngModel)]="selectedMake" [style]="{'width':'200px'}" ></p-dropdown> 
 
    </div> 
 
</div> 
 
<br> 
 

 
<div class="container row"> 
 
    <div class="col-sm-6"> 
 
    <p class="col-sm-3" >Motor Type :</p> 
 
    <p-dropdown class="col-sm-4" [options]="motors" [(ngModel)]="selectedMotorType" [style]="{'width':'200px'}" ></p-dropdown> 
 
    </div> 
 
</div> 
 
<br> 
 

 
<div class="container row"> 
 
    <div class="col-sm-6"> 
 
    <p class="col-sm-3" >Pole Type :</p> 
 
    <p-dropdown class="col-sm-4" [options]="poles" [(ngModel)]="selectedPole" [style]="{'width':'200px'}" ></p-dropdown> 
 
    </div> 
 
</div> 
 

 
<div class="col-sm-4"> 
 
    <button class="" pButton type="button" class="ui-button-danger" (click)="addRow()" label = " Add New Motor"></button> 
 
    <button class="" pButton type="button" (click)="DisplayResult()" label="Display Result"></button> 
 

 
</div> 
 

 

 

 
<table id="t01"> 
 
<tr> 
 
<th>S.No.</th> 
 
<th>Qty</th> 
 
<th>Type Refrence</th> 
 
<th>KW Rating</th> 
 
<th>Frame Size</th> 
 
<th>Voltage</th> 
 
<th>Frequency</th> 
 
<th>Features</th> 
 
</tr> 
 
<tr *ngFor=" let row of rows"> 
 
<td>1</td> 
 
<td><input type="qty" name="qty"></td> 
 
<td>{{log}}</td> 
 
<td>{{kw}}</td> 
 
<td>{{frame}}</td> 
 
<td>415 v</td> 
 
<td>50 Hz</td> 
 
<td></td> 
 
</tr> 
 
</table>

Answer 1

所有你需要做的是写一个函数/方法的组件中，然后调用在点击事件函数/方法，如果您选择添加按钮

@Component({...}) 
export class TestComponent { 
    addRow() { 
    this.rows.push({ 
     make : this.make, 
     model: this.model, 
     pole: this.pole 
    }); 
} 

点击按钮时addRow点火

<button class="" pButton type="button" class="ui-button-danger" (click)="addRow()" label = " Add New Motor">Add New Motor</button> 

我还在按钮标签之间添加了文字以供显示。你必须更新表中选择适当的值，以显示

<table id="t01"> 
    <tr> 
    <th>S.No.</th> 
    <th>Qty</th> 
    <th>Type Refrence</th> 
    <th>KW Rating</th> 
    <th>Frame Size</th> 
    <th>Voltage</th> 
    <th>Frequency</th> 
    <th>Features</th> 
    </tr> 
    <tr *ngFor=" let row of rows"> 
    <td>{{ row.make.name }}</td> 
    <td><input type="qty" name="qty" [row.model]></td> 
    <td>{{ row.model.log }}</td> 
    <td>{{ row.model.kw}}</td> 
    <td>{{ row.model.frame }}</td> 
    <td>{{ row.model.somethingElse }}</td> 
    <td>{{ row.pole.simething }}</td> 
    <td>{{ row.pole.etc }}</td> 
    </tr> 
</table> 

我不知道你的数据，所以只有我们米随机选定字段的值，但是这是你会怎么通常做