奇怪的事情发生在我身上，我想分享，可能是一些人知道为什么会这样。
所以模板：

<ion-select>
  <ion-select-option
    *ngFor="let transportMode of transportService.getTransportModes()"
    [value]="transportMode.id"
  >
    {{ transportMode.name }}
  </ion-select-option>
</ion-select>

在.ts文件中，服务被注入：

constructor(
    protected transportService: TransportService,
  ) {}

服务只返回id/name对值的数组。就像这样：

getTransportModes(): TransportMode[] {
    return [
      {
        id: TransportModeTypes.VAN,
        name: 'Van',
      },
      {
        id: TransportModeTypes.TRACTOR,
        name: 'Tractor',
      },
      {
        id: TransportModeTypes.TRAILER,
        name: 'Trailer',
      },
      {
        id: TransportModeTypes.SHIP,
        name: 'Ship',
      },
    ];
  }

export enum TransportModeTypes {
  VAN = 1,
  TRACTOR = 2,
  TRAILER = 3,
  SHIP = 4,
}

export interface TransportMode {
  id: TransportModeTypes;
  name: string;
}

这个Ionic完美地构建了选择字段，但是当我点击下拉列表显示时，它会显示一个带有值和单选按钮的弹出窗口，而单选按钮是不可点击的，所以我不能选择一个值。这是非常奇怪的行为。
如果我在模板中进行更改并将值存储在单独的属性中-那么select就可以正常工作。
工作示例：
模板：

<ion-select>
  <ion-select-option
    *ngFor="let transportMode of transportModes"
    [value]="transportMode.id"
  >
    {{ transportMode.name }}
  </ion-select-option>
</ion-select>

.ts文件：

protected transportModes!: TransportMode[];

  constructor(
    private transportService: TransportService,
  ) {}

  ngOnInit(): void {
    this.transportModes = this.transportService.getTransportModes();
  }

我无法解释和猜测，为什么这是有效的，而上面的变体不起作用。有什么想法吗
我附上版本，只是为了更多的信息：

"@angular/core": "^15.2.7",
 "@ionic/angular": "7.0.3",