为什么我的html select不选择数据的第一个值？

Question

我有两个几乎完全相同的选择选项，一个按我期望的那样在选择框中显示了这些选项的第一个值，而另一个则没有。

这个没有选择我期望的第一个值：

<div class="col-3 col-md-1 text-center">
    <select name="quantity" [(ngModel)]="item.quantity">
        <option *ngFor="let quantity of quantities" [value]="quantity.value">
            {{quantity.value}}
        </option>
    </select>
</div>

上述选择框的数据：（我希望1的值会自动显示在选择框中，但不会显示）。

this.quantities = [
  {value: 1 },
  {value: 2 },
  {value: 3 },
  {value: 4 },
  {value: 5 },
  {value: 6 },
  {value: 7 },
  {value: 8 },
  {value: 9 },
  {value: 10 }
];

这将按预期显示选择框的第一个值：

<select name="exp_year" [(ngModel)]="order.customer.payment.exp_year">
  <option *ngFor="let expYear of expYears">
      {{expYear.year}}
  </option>
</select>

此选择的数据：（如预期那样，在选择框中显示2019）：

this.expYears = [
  { year: '2019' },
  { year: '2020' },
  { year: '2021' },
  { year: '2022' },
  { year: '2023' },
  { year: '2024' },
  { year: '2025' },
  { year: '2026' },
  { year: '2027' },
  { year: '2028' },
];

Answer 1

您需要启动选择框以设置默认值。 StackBlitz演示

.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  quantity = 2;
  quantityList = [
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
    { value: 7 },
    { value: 8 },
    { value: 9 },
    { value: 10 }
  ];
}

.html

<select name="quantity" [(ngModel)]="quantity">
  <option *ngFor="let quantity of quantityList" [value]="quantity.value">
    {{quantity.value}}
  </option>
</select>