(更改)选择在 mat-select 中不起作用 - TypeScript

介绍

如果在 Angular Material 中使用 mat-select 时，更改选择器（例如，选项卡）不起作用，则可能是由于您未正确处理值绑定或选项列表。

原因

这个问题通常是由于以下原因之一所致：

1. 没有正确绑定值：当您尝试更改选择器时，绑定值可能不会正确更新。在这种情况下，选择器将保持不变。

2. 没有正确配置选项列表：如果选项列表中的选项没有正确配置，更改选择器将不起作用并且可能会导致错误。

解决方案

以下是一些解决方案，您可以尝试：

1. 确认值绑定正确：请确保使用了正确的值绑定语法，并且绑定的变量与选择器选项的值匹配。例如，如果您使用的是 ngModel，则请确保它绑定到选择器的值属性：

   <mat-select [(ngModel)]="selectedValue">
     <mat-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mat-option>
   </mat-select>
   

2. 检查选项列表：请确保使用了正确的选项列表语法。例如，如果您使用的是 ngFor，则请确保指定了正确的迭代器变量和迭代的对象。例如：

   <mat-select [(ngModel)]="selectedValue">
     <mat-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mat-option>
   </mat-select>
   

   如果您使用的是静态选项列表，则可以像这样填充它：

   <mat-select [(ngModel)]="selectedValue">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2">Option 2</mat-option>
     <mat-option value="option3">Option 3</mat-option>
   </mat-select>
   

结论

如果您遇到了 mat-select 更改选择器不起作用的问题，请检查您的值绑定和选项列表配置，确保它们都正确。如果您仍然无法解决问题，可以尝试查看浏览器的开发者工具中是否有任何错误消息，并检查您的代码以查找其他问题。