HTML表格在表格列中正确使用和设置mat-select

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.name }}</td>
      <td>
        <mat-form-field appearance="fill">
          <mat-label>Role</mat-label>
          <mat-select [(ngModel)]="user.role">
            <mat-option *ngFor="let role of roles" [value]="role">{{ role }}</mat-option>
          </mat-select>
        </mat-form-field>
      </td>
    </tr>
  </tbody>
</table>

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

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.css']
})
export class UserTableComponent {
  users = [
    { name: 'John Doe', role: 'admin' },
    { name: 'Jane Smith', role: 'user' }
  ];
  roles = ['admin', 'user', 'guest'];
}

<mat-select [(ngModel)]="user.role">
  <mat-option *ngFor="let role of roles" [value]="role">{{ role }}</mat-option>
</mat-select>

export class UserTableComponent {
  users = [
    { name: 'John Doe', role: 'admin' },
    { name: 'Jane Smith', role: 'user' }
  ];
  roles = ['admin', 'user', 'guest'];
}