如何在angular中使用select选项显示表格信息？

import { Component } from '@angular/core';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent {
  selectedOption: string;
  options = [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
    { id: 3, name: 'Option 3' }
  ];

  onSelectChange(event: any) {
    console.log('Selected option:', this.selectedOption);
    // 这里可以添加逻辑来更新表格信息
  }
}

<div>
  <select [(ngModel)]="selectedOption" (change)="onSelectChange($event)">
    <option *ngFor="let option of options" [value]="option.id">{{ option.name }}</option>
  </select>
</div>

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr *ngIf="selectedOption">
    <td>{{ selectedOption }}</td>
    <td>{{ getOptionName(selectedOption) }}</td>
  </tr>
</table>

/* 可以根据需要添加样式 */