Question

我正在根据下拉选择创建一个表。我可以显示单个选择的数据。我想为“新按钮”创建一个函数，它将添加一行，所选值将显示在新生成的行中。如何使用javascript或angular 2实现此目的。 P.S.我只是一个初学者。提前致谢。

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>

我不知道您的数据，所以我们只是从随机字段中选择了值，但这就是您通常会这样做的方式

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

1 个答案: