如何從Angular中的一組輸入字段中禁用輸入字段

Question

創建一個包含汽車名稱的角度表。 每個原始文件都包含一個重新排序按鈕，輸入字段和一個編輯按鈕。 輸入字段中的值使用* ngFor填充。 最初，所有輸入字段均被禁用。 單擊編輯按鈕時，需要啟用相應的輸入字段。 但是，此處所有輸入字段均已啟用。 我經歷了很多問題。 但是找不到任何解決方案。 如果有人可以提供幫助，將會很有幫助。 提前致謝。 HTML

<table mat-table width="1500">
<tr>
 <th>Cars</th>
 <td>
  <ul *ngFor='let car of Car'>
   <li >
      <button mat-icon-button color="Green">
         <mat-icon>reorder</mat-icon>
      </button>
      <input mat-input #a id={{car.id}} value={{car.name}} class="text- width" 
        [disabled]=is_edit>
      <button mat-icon-button color="Green" (click)="isDisable()">
         <mat-icon>edit</mat-icon>
       </button>
   </li>
  </ul>
 </td>
</tr>
</table>

.ts文件

export class CarComponent implements OnInit {
  is_edit: boolean;
  public Car: any[] = [{ id: '1', name: 'Maruti' }, { id: '2', name: 'Volkswagen' }, { id: '3', name: 'Ford' }]; 

  public ngOnInit(): void {
    this.is_edit = true;
  }

 public isDisable(): void {
    this.is_edit = false;
  }
}

Answer 1

在這里，每行都需要有is_edit。 因此，您可以在單擊相應字段的按鈕時進行更新。 並且您需要在isDisable函數中單擊“編輯”按鈕中的數組的索引值，使用該索引您需要對象汽車對象。

您的.ts應該是

export class CarComponent implements OnInit {

  public Car: any[] = [{ id: '1', name: 'Maruti', is_edit: true }, { id: '2', name: 'Volkswagen', is_edit: true }, { id: '3', name: 'Ford', is_edit: true }]; 

  public ngOnInit(): void {
  }

 public isDisable(index: number): void {
    this.Car[index].is_edit = false;
  }
}

和你的HTML應該是

<table mat-table width="1500">
<tr>
 <th>Cars</th>
 <td>
  <ul *ngFor='let car of Car; let index as carIndex'>
   <li >
      <button mat-icon-button color="Green">
         <mat-icon>reorder</mat-icon>
      </button>
      <input mat-input #a id={{car.id}} value={{car.name}} class="text- width" 
        [disabled]=car.is_edit>
      <button mat-icon-button color="Green" (click)="isDisable(carIndex)">
         <mat-icon>edit</mat-icon>
       </button>
   </li>
  </ul>
 </td>
</tr>
</table>