Angular 7：选择Option值被解析为“[index]：[value]”

Question

我正在使用Angular 7.当我尝试将select的值绑定到变量时，该值总是被解析为类似“0:25”，“1：50”，“2:75”的内容。

下面的示例代码用于选择分页器的页面大小。哪里pageSizeOptions = [25, 50, 75, 100]。预期的行为是pageSize，绑定到[(ngModel)]，应该包含number类型而不是字符串。使用[value]将返回值nd的字符串化版本ngValue返回"[index]: [value]"格式。

    <select
      class="form-control"
      (change)="onSelectPageSize($event.target.value)"
      [ngModel]="pageSize"
    >

      <option *ngFor="let size of pageSizeOptions; let i = index" [ngValue]="size">
        {{ size }}
      </option>
    </select>

Answer 1

问题是您使用的是ngValue而不是value属性。

<option *ngFor="let size of pageSizeOptions; let i = index" [value]="size">
    {{ size }}
  </option>

ngvalue和value属性之间的区别在于value始终是string，其中在ngValue中，您可以传递对象。

有关Differences between value and ngValue in Angular 5的更多信息，请参阅此答案