时间戳

首页 > 解决方案 > 在 Angular 5 选项字段中处理布尔过滤器？

javascript - 在 Angular 5 选项字段中处理布尔过滤器？

问题描述

HTML

<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>

以上是 html 模板，我想发送如下所示的 json 响应，除非选择了特定选项，否则只有该值应该为 true。

JSON

 {
     one    : false,
     two    : false,
     three  : false,
     four   : false
 }

例如- 如果one选择了，那么 json 响应应该像 -

  {
     one    : true,
     two    : false,
     three  : false,
     four   : false
  }

我如何在角度 5 中处理这个问题，是否有任何内置功能？还是有更好的方法来添加过滤器？

标签： javascripttypescriptfrontendangular5

解决方案

从对象数组中加载您options并在您的元素上使用双向数据绑定select，即：

let options = [
    {
        value: 'one',
        optionName: 'One'
    },
    {
        value: 'two',
        optionName: 'Two'
    },
    {
        value: 'three',
        optionName: 'Three'
    }
]

let selectedOption = 'two'

<select [(ngModel)]="selectedOption ">
...

然后迭代您的选项以构建响应：

console.log(options.map(x => x.value).map(x => { return {[x]: x === selectedOption ? true : false}}))

推荐阅读