1
我正在使用角2.我已经基于下拉选择创建了一个表。我可以在按钮单击(克隆行)时生成一个新行。我如何禁用前一行。所以值只会在当前新生成的行中发生变化。我可以做到这一点,欢迎任何选择。感谢提前。 Screenshot在角2中禁用行
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>
我在这里有点麻烦理解这个问题,你可能试着解释一下吗? – Alex
@ ajt_82这个问题有不同的接受,我试图解决。所有我想添加一个新的行到表(点击添加新的电机按钮,参考你可以看到有问题的截图)。我能够用索引生成一个新行。我需要帮助,我怎样才能推动数据在新生成的行(点击显示结果,显示结果按钮能够显示第一行的数据)以前的行应该是不变的。每当我点击新电机,数据显示以新行显示。 ts代码https://pastebin.com/zCL6qYRs,html代码https://pastebin.com/Ywv3KJxP –
我想我现在得到你的问题。你应该从“表单”创建对象(你可以将它作为一个表单)并将这些对象推送到数组中。对象例如具有属性'log',所以在这种情况下,所有'log'都是唯一的。现在你只是使用一个属性'log',这意味着表中的所有字段将具有相同的值。 – Alex