テーブルの動的行を作成する方法javascript angular 2

Question

私はドロップダウン選択に基づいてテーブルを作成しています。私は単一の選択のためのデータを表示することができます。私は行を追加し、選択された値が新しい生成された行に表示されます "新しいボタン"のための関数を作成したい。どのように私はjavascriptまたは角2を使用してこれを達成することができます。 P.S.私はちょうど初心者です。前もって感謝します。

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> 

また、表示用のボタンタグの間にテキストを追加しました。あなたは、私はちょうど私たちがランダムフィールドから選択された値をM、あなたのデータを知りませんでしたが、それは