Angular4字符串转整数失败及Angular2+Bootstrap4下拉选框问题咨询

我来帮你逐个解决这两个Angular相关的技术问题：

问题一：Angular4中字符串转整数 #

在Angular4里，字符串转整数的核心方法和原生JavaScript一致，不过结合Angular的使用场景（组件逻辑处理、模板绑定），给你几种常用且可靠的实现方式：

组件类中转换（推荐） #

建议在组件类里完成数据转换，再传递给模板，保持模板简洁：

• parseInt()方法：记得传入基数参数（通常为10），避免非十进制字符串的意外转换：

  const strNumber = "456";
  const intNumber = parseInt(strNumber, 10); // 输出：456
  

• Number()构造函数：适合纯数字字符串的快速转换：

  const intNumber = Number(strNumber);
  

• 一元+运算符：最简洁的转换方式，效果和Number()一致：

  const intNumber = +strNumber;
  

如果字符串可能包含非数字内容或为空，建议添加校验逻辑：

convertStrToInt(str: string): number | null {
  const num = parseInt(str, 10);
  return isNaN(num) ? null : num;
}

模板中直接转换（按需使用） #

如果需要在模板里直接转换（比如显示或绑定属性），可以用表达式或管道：

<!-- 使用Number()直接转换 -->
{{ Number(user.ageStr) }}

<!-- 使用DecimalPipe格式化（适合需要数字格式化的场景） -->
{{ user.ageStr | number: '1.0-0' }}

问题二：Angular2中Bootstrap4下拉选框的优化 #

看你的代码，当前逻辑会生成多个select元素（仅匹配user.name == test的才显示），这大概率不符合“单个下拉框展示可选用户”的需求。下面是修正后的方案：

问题分析 #

• ngFor放在select外层会生成多个下拉框，而非单个下拉框内的多个选项
• 手动添加selected属性和ngModel冲突，应该由ngModel控制选中状态
• Bootstrap栅格列数最大为12，col-sm-16是无效配置

修正后的代码 #

<div class="form-group">
  <label for="isActived" class="col-sm-4 control-label">Add BY</label>
  <div class="col-sm-12"> <!-- 修正为合法的栅格列数 -->
    <select 
      class="custom-select" 
      name="State" 
      required 
      [(ngModel)]="model.isActived" 
      #isActived="ngModel"
      id="isActived"
    >
      <!-- 默认选项 -->
      <option value="0">{{test}}</option>
      <!-- 循环生成用户选项 -->
      <option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>
    </select>
    <!-- 表单校验提示 -->
    <div *ngIf="isActived.invalid && (isActived.dirty || isActived.touched)" class="text-danger">
      请选择有效的用户
    </div>
  </div>
</div>

关键修改说明 #

1. 将ngFor移至<option>标签：这样单个select内会生成所有用户的选项，而非多个独立下拉框
2. 修正栅格列数：将col-sm-16改为col-sm-12（Bootstrap栅格每行最多12列）
3. 绑定选项值：用[value]绑定用户ID（或你需要的字段），选中后model.isActived会自动获取对应值
4. 统一选中状态：移除手动selected属性，由ngModel管理选中状态，当model.isActived与选项value匹配时自动选中
5. 添加校验提示：利用模板引用变量#isActived="ngModel"展示实时校验反馈，提升用户体验

特殊需求适配（仅显示特定用户） #

如果你的需求是只展示name == test的用户选项，建议在组件类中先过滤数据：

// 组件类中过滤用户数组
filteredUsers = this.users.filter(user => user.name === this.test);

模板中使用过滤后的数组：

<option *ngFor="let user of filteredUsers" [value]="user.id">{{user.name}}</option>

这样既保持模板简洁，也提升了代码可读性。

内容的提问来源于stack exchange，提问作者AVA