根据Angular中同一行的select中的选定值更改表格单元格的值

export class MyComponent {
  tableData: any[] = [
    { id: 1, name: 'Item 1', category: 'Category 1', value: 100 },
    { id: 2, name: 'Item 2', category: 'Category 2', value: 200 },
    // ... more data
  ];

  selectOptions: string[] = ['Option 1', 'Option 2', 'Option 3'];
  selectedOption: string = '';
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Category</th>
      <th>Select</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.category }}</td>
      <td>
        <select [(ngModel)]="selectedOption" (change)="updateValue(item, selectedOption)">
          <option *ngFor="let option of selectOptions" [value]="option">{{ option }}</option>
        </select>
      </td>
      <td>{{ item.value }}</td>
    </tr>
  </tbody>
</table>

updateValue(item: any, selectedOption: string) {
  // 根据选定的选项更新表格单元格的值
  switch (selectedOption) {
    case 'Option 1':
      item.value = 100;
      break;
    case 'Option 2':
      item.value = 200;
      break;
    case 'Option 3':
      item.value = 300;
      break;
    default:
      item.value = 0;
      break;
  }
}