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>

如何从Angular中的一组输入字段中禁用输入字段

1 个答案: