javascript - 禁用 Angular 2 中的行

Question

我正在使用 Angular 2。我已经根据下拉选择创建了一个表格。我能够在单击按钮时生成一个新行(克隆行)。如何禁用前一行。因此，值只会在当前新生成的行中发生变化。我怎样才能实现这一点，欢迎任何替代方案。提前致谢。 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

尝试在标签中使用禁用的属性，如图所示

[disabled]="!available"

或使用完整标签

<button type="submit" [disabled]="!available">Submit</button>

在点击事件上，您可以将变量设为 true 或不切换它