Typescript 无法将select选项的值设置为ngFor循环中的第一个元素

我有一个 Select 输入，其中有一个ngFor循环，用于创建基于 colored颜色 数组的选项.

我需要的行为是自动 Select 第一个选项和to，以便当输入被创建/更改时，角react 形式可以获得它的值.

到目前为止，我的表格看起来是这样的:

<form [formGroup]="stepOneForm">
  <label for="modelSelect">Model:</label>
  <select id="modelSelect" formControlName="model">
    <option value="" selected>Choose...</option>
    <option *ngFor="let model of models" [value]="model.code">
      {{ model.description }}
    </option>
  </select>

  <!-- The input i am interested in -->
  <ng-container *ngIf="stepOneForm.get('model')?.value as code">
    <label for="colorSelect">Color:</label>
    <select id="colorSelect" formControlName="color" (change)="onColorSelected()" [value]="colors[0].code">
      <option *ngFor="let color of colors" [value]="color.code">
        {{ color.description }}
      </option>
    </select>
    <img [src]="imagePath" alt="car">
  </ng-container>
</form>

我的TS部分看起来是这样的:

ngOnInit() {
    this.carService.getModels().subscribe(models => {
      this.models = models;
    });

    this.stepOneForm.valueChanges.subscribe(() => {
      this.carService.updateStepOneValidity(this.stepOneForm.valid);
      const model = this.stepOneForm.get('model')?.value
      this.colors = this.models.find(modelObj => modelObj.code === model)?.colors ?? [];
      
      Console.log(this.stepOneForm.get(‘color’)？.value) // This returns '' (empty string)
      
      if (model) {
        this.carService.updateShoppingCart(this.stepOneForm.value)
      }
    })
  }

当ng—container内容被显示时，订阅被触发，在 colored颜色 输入中，我看到默认 Select 的 colored颜色 ，但在这一行中，我得到了一个空字符串，而我应该得到这个选项的值:

Console.log(this.stepOneForm.get(‘color’)？.value)