时间戳

首页 > 解决方案 > Angular 7：选择选项值被解析为“[index]：[value]”

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

问题描述

我正在使用 Angular 7。当我尝试将 a 的值绑定select到变量时，该值总是被解析为“0:25”、“1:50”、“2:75”之类的东西。

下面的示例代码用于为分页器选择页面大小。哪里pageSizeOptions = [25, 50, 75, 100]。预期的行为是pageSize，绑定到[(ngModel)]，应该包含一个number类型而不是一个字符串。Using[value]将返回值的字符串化版本并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>

标签： angularselectangular7angular-ngmodel

解决方案

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

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

ngvalue 和 value 属性的区别在于 value 总是字符串，在 ngValue 中你可以传递对象。

有关更多信息，请参阅此答案Angular 5 中 value 和 ngValue 之间的差异

推荐阅读