如何禁用角2中的多個文本框

Question

我有'n'行數有文本框和選擇框。我想，當我使用角2.

我的代碼改變在同一行中選擇框的值來禁用一個文本框低於：

<table> 
    <tr> 
    <td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td> 
    <td> <select (onValueChanged)="test(data.rowIndex)"> 
      <option>Yes</option> 
      <option>No</option> 
    </td> 
    </tr> 
    <tr> 
    <td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td> 
    <td> <select (onValueChanged)="test(data.rowIndex)"> 
      <option>Yes</option> 
      <option>No</option> 
    </td> 
    </tr> 
    . 
    . 
    . 
</table> 

component.ts 

tabNumber: number = -1; 

test(valueID){ 
     this.tabNumber = valueID; 
} 

isDisabled(num){ 
     return this.tabNumber === num; 
    } 

這以上行禁用我只選擇了一個文本框最近並啓用其他文本框。因此，我的代碼一次只能啓用/禁用一個文本框。但我想根據我的選擇禁用多個框。任何人都可以幫忙嗎？

Answer 1

看到它在行動上：plunker

HTML：

<table> 
    <tr *ngFor="let item of items; let i = index"> 
    <td><input type="text" [disabled]="isDisabled(i)"/></td> 
    <td> <select (change)="toggle($event,i)"> 
      <option value="yes">Yes</option> 
      <option value="no">No</option> 
      </select> 
    </td> 
    </tr> 

</table> 

組件：

export class AppComponent { 
    items = [{value : "hi"},{value : "hi"},{value : "hi"},{value : "hi"}] 
    rows: number[] = []; 

    isDisabled(index) { 
    return this.rows[index] === -1; 
    } 

    enable(index){ 
    this.rows[index] = 1; 
    } 

    toggle($event,index){ 
    let selectElement = $event.target; 
    let value = selectElement.options[selectElement.selectedIndex].value; 
    if(value === "yes"){ 
     this.enable(index); 
    }else{ 
     this.disable(index); 
    } 
    } 

    disable(index){ 
    this.rows[index] = -1; 
    } 
}