Zeile in Winkel 2 deaktivieren

Question

Ich verwende Winkel 2. Ich habe eine Tabelle basierend auf Dropdown-Auswahl erstellt. Ich bin in der Lage, eine neue Zeile auf Knopfdruck (Klonen der Zeile) zu generieren. Wie kann ich die vorherige Zeile deaktivieren? So werden Werte nur in der aktuellen neu generierten Reihe geändert. Wie kann ich dies erreichen? Jede Alternative ist willkommen. Vielen Dank im Voraus. 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

Versuchen Sie, die Eigenschaft disabled in dem Tag mit als

gezeigt

[disabled]="!available" 

oder mit dem vollen Tag

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

Auf dem Click-Ereignis können Sie dann mach entweder die Variable wahr oder nicht t o toggle es